How to get data from global function

Question

I'am new in React so my question probably is easy to resolve. I made simple version of my code to illustrate my problem.

class ReactComponent extends Component {
    addToken(token){
        this.props.actionAddODToken(token);
    }

    render(){
        return (
        <div>
          <h1>this.props.token</h1>
        </div>
        )
    }
}

function mapStateToProps(state){
    return {addOneDriveToken: state.addOneDriveToken}
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({...boundActionCreators}, dispatch);
}

function sendToComponent(data) {
    let data ="some string data";
}

export default connect(mapStateToProps, mapDispatchToProps)(AddDrive);

Unfortunately sendTo Component is global function because I get data from child popup.

window.opener.sendToComponent(data);

sendToComponent is fire after ReactComponent rendered. So my question is how to send data from a function to a component

score 1 · Answer 1 · answered Sep 10 '17 at 22:27

1

You're using Redux, so the "correct" way is to send data into the Store and then pick it up using mapStateToProps. So in your child popup you need to do a dispatch action, rather than using a global e.g.

function ChildPopup({ handleSend }) {
   return (
      <div className='popup'>
          <button onClick={ handleSend }>Send</button>
      </div>
   );
} 

const mapPropsToDispatch = {
    handleSend() {     //this gets turned into a prop in your popup
        return {
            type: "SEND_TO_COMPONENT",
            valueToSendToComponent: "some string data"
        }; //this action will get dispatched to the store and you can handle with a reducer
    }
};

export default connect( undefined, mapPropsToDispatch )( ChildPopup );

answered Sep 10 '17 at 22:27

Duncan Thacker

5,073
1
10
20

OMG it's obvious. Thank you! – Konrad Kluzek Sep 11 '17 at 11:18
I have another problem. Popup is another page, so this popup created own store versions that is not shared with parent page – Konrad Kluzek Sep 11 '17 at 11:31
@KonradKluzek If Dunkan Thackers answer solved your original issue you should upvote and accept the answer. You can create a new question if you have more things you need help with. – jonahe Sep 13 '17 at 09:14

score 0 · Accepted Answer · answered Sep 10 '17 at 22:22

0

I think you can use event listener for that purpose. Here is a great answer on react and event listeners. Also there is react-event-listener library that you can check out.

answered Sep 10 '17 at 22:22

bennygenel

23,896
6
65
78

score 0 · Answer 3 · answered Sep 10 '17 at 22:38

Here's a very simplified example of how to write component that asks for user input. You would then connect it to Redux so that it could dispatch the right action and store that data in the Redux state, which would make the data available to any component you want (if you connect it as well).

const UserInputFetcher = ({onUserInput}) => {
 getUserInput()
   .then(onUserInput)
   .catch(error => console.log('Ooops, error:', error));
 return <p>Don't mind me. Look in the "console"</p>;
}

const getUserInput = () => {
  return new Promise((resolve, reject) => {
    const userInput = window.prompt('Some input would be nice:');
    if(userInput) {
      resolve({ veryImportantUserData: userInput })
    } else {
      reject(new Error('User refused to give input'));
    }
  });
}

const fakeDispatchOfAction = userInput => {
  console.log('Dispatcing action with payload', userInput);
}

ReactDOM.render(<UserInputFetcher onUserInput={fakeDispatchOfAction} />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

How to get data from global function

3 Answers3