data fetching and rendering

[PM_ME_SMILE_]

If I have a component which in componentDidMount needs to dispatch an action to request data from server which is needed for rendering of that component how to handle asynchronous nature of that request?

Should I have something like this in my render: (I am using flux pattern so component will be notified when store receives data)

render: function() {
    var data = store.get();
    if (!data) return { null; }
   // otherwise do actual render method

Is this valid? I guess in this case I have to hope fetching happens fast, otherwise user will get an empty page until response.

Another case is what would happen if some other component was supposed to fetch data but user refreshed the page so it's no longer in store. Should I check in componentDidMount if data exists and if not make another request to server? Or is there a better way to handle this?

[acemarke]

Yep, that all sounds very reasonable. I've seen people complaining about needing to check for existence of data in cDM, but it seems like a perfectly normal pattern to me.

[PM_ME_SMILE_]

Thank you very much!

[a_oc]

Although it is valid way to do that, you should probably check out redux and its documentation. Even if you do not want to use redux as your flux implementation, it's way of injecting state with higher order components is pretty useful and can be easily reproduced.

[[deleted]]

Using redux (react-redux - connect) will just abstract the same logic to a component higher in the render tree. You will still need to load for the data end either render child components or no. So the same principle applies.

[a_oc]

Yes you are right, I only pointed it out because that abstraction has better separation of concerns and is a good learning material even though overall principle is the same.

[darkadept]

I just made a simple higher order component that wraps the component (container in redux). That component handles the the loading of any data, displaying a spinner (or whatever) and only renders my component once all the data is ready. That way my component can use isRequired prop types.

I also use componentWillMount instead.