CODEWITHSUNDEEP
react-routerredux
K..
K..

Reputation: 4223

Where to load the server data

I'm using the react-router and navigate to a component that gets an ID in the URL and has to use this ID to get data from the server with the help of an action.

At the moment I'm calling the action creator in the componentWillMount hook.

This works so far, but brings a problem. In the render method I have to check, if myData really exists with all its attributes, before I can really render.

@connect(state => {myData: state.etc.myData})
export default class extends React.Component {

  componentWillMount = () => {
    this.props.dispatch(
      ActionCreators.getData(this.props.params.id)
    )
  }

  render() {
    if (this.props.myData.hasNotLoaded) return <br/>
    ...
  }

}

Is there another way to get data into the store before rendering without manual checks?

Upvotes: 3

Views: 1080

Answers (2)

Victor Suzdalev
Victor Suzdalev

Reputation: 2212

You can subscribe to router's onEnter hook and dispatch actions from where.

const store = configureStore()
const routing = (<Router>
    <IndexRoute onEnter={()=>store.dispatch(myLoadDataActionCreator())}/>
</Router>)

So you can avoid setState from previous answer and don't tie up component with redux.

Upvotes: 9

Hatem Jaber
Hatem Jaber

Reputation: 2402

You should create a call back, for example:

_onChange() {
    this.setState(myStore.getData());
}

Then in the following react functions do the following:

componentDidMount() {
    myStore.addChangeListener(this._onChange);
},
componentWillUnmount() {
    myStore.removeChangeListener(this._onChange);
}

I assume you're using the mixins for the react-router, if not, take a look at the docs for it, they have some useful functions that are worth looking at.

I don't think you will need that if logic in the render() method, react will handle that with the virtual dom management and know when to load it and the data.

Upvotes: 1

Related Questions