CODEWITHSUNDEEP
reactjsredux
nbkhope
nbkhope

Reputation: 7474

Handling loading state in a React app that uses Redux with redux-thunk, going back to component after data has been fetched once

I have a React app that uses Redux with redux-thunk. Given a certain component that needs to fetch information from an API, I call a bound action creator to make that request after it mounts:

componentDidMount() {
  this.props.fetchSomething();
}

For the UI to know whether it is in a loading state, I use a loading variable from the application state. My reducer handles three action types for LOADING, SUCCESS, and FAILURE. The loading variable is set to true when the LOADING action is emitted; then it is set to false on SUCCESS and FAILURE.

Thus there is the following in the render method:

render() {
  if (this.props.loading) {
    return <Spinner />;
  }

  return (
    <div>
      This part uses the fetched data, available via this.props.something
    </div>
  );
}

Because initially this.props.something is null, I also have to check for its existence before rendering the desired template, so the above if-statement becomes:

if (!this.props.something || this.props.loading) {
  return <Spinner />;
}

This approach has served me well so far, but there are some issues, one of them being:

The first time I access the page, this.props.something is not yet set. But the second time I access the page, with the app already loaded, that data had already been fetched once, so this.props.something will have been defined. Because of that, there is brief moment in which the if statement condition is FALSE and the actual component template gets rendered.

(1) How would you guys take care of that issue?

(2) And with your approach, how would you handle a component that had to make multiple requests, like five of them, using the same approach above, with a different loading/something variable for each? I can duplicate the same approach above, but get the issue of brief if-statement failure for each resource that is already defined, but not loading.

Upvotes: 3

Views: 689

Answers (1)

Miroslav Pap&#237;rn&#237;k
Miroslav Pap&#237;rn&#237;k

Reputation: 779

1) You have two options. U can dispatch some RESET action on componentWillUnmount and reset your store, this.props.something will be null again. Second option is to show data if u already have them, show spinner and when second fetch is success merge it together. (depends on purpose and UI)

2) I have never needed it but what about to store it in redux as map {componentName: loaded} and check if all components are loaded?

Edit: When u set initial value of loading to true you don't need to check something prop.

Upvotes: 1

Related Questions