0

I've integrated React-redux in a externalJs Application (built on custom JS framework). I need to set initial data for redux store from externalJS but, the externalJs is unable to access the react store to set the data. The store gets triggered when the root reactJS component is mounted on the DOM , but i need to set the initial data before its Mounted on the DOM. i referred following links but they were not able to resolve my problem. Can someone please tell me what I am missing?

https://brettdewoody.com/accessing-component-methods-and-state-from-outside-react/

Accessing react components outside

i'm using webpacks, react 16.1 with redux

sample root component structure given below in index.js

render() {

        return (
            <Provider store={store}>
                <Email ref={(EmailComponent) => { window.EmailComponent = EmailComponent }} />
            </Provider>
        );
    }
Chandru velan
  • 136
  • 1
  • 3
  • 21

1 Answers1

1

I'm assuming you're trying to expose EmailComponent and 'store' to the DOM and other frameworks since you are declaring it on a global window object. React.render has a callback as a third parameter which you can use to know when the React App is mounted to DOM.

ReactDOM.render(<App />, document.getElementById('root'), function () {
  // now the root React App is mounted and the data from it will be available
  // your window.EmailComponent and window.store should now be avialable
  console.log(window.EmailComponent, window.store)

})



render() {
  window.store = store
        return (
            <Provider store={store}>

                <Email ref={(EmailComponent) => { window.EmailComponent = EmailComponent }} />
            </Provider>
        );
    }
Ska
  • 6,658
  • 14
  • 53
  • 74
  • i'm not trying to expose the component , the snippet which i mentioned what i tried already, Actually i'm trying to access the redux store before the react components rendered in DOM, its the only component built in react rest or in CustomJS i need to pass some data store before its rendered, currently i'm displaying loading image but its not as expected should be rendered together with other components – Chandru velan Aug 27 '18 at 13:14
  • Ok, I does sound a bit unusual what you're trying to do. Check my edited answer and see if you get the store available inside that callback. I did not try if it works, but this is how I would try approaching it. – Ska Aug 27 '18 at 14:49
  • Can't you do it in the React constructor? – Sarvavyapi Aug 27 '18 at 19:28
  • Yes, you can do it in constructor. Anywhere where you have access to props. But it will not be available in the DOM until component is mounted. So maybe the best place is in componentDidMount. – Ska Aug 28 '18 at 12:10