How to show a loading indicator in React Redux app while fetching the data? [closed]

Question

I'm new to React/Redux. I use a fetch api middleware in Redux app to process the APIs. It's (redux-api-middleware). I think it's the good way to process async api actions. But I find some cases which can't be resolve by myself.

As the homepage (Lifecycle) say, a fetch API lifecycle begins with dispatching a CALL_API action ends with dispatching a FSA action.

So my first case is showing/hiding a preloader when fetching APIs. The middleware will dispatch a FSA action at the beginning and dispatch a FSA action at the end. Both the actions are received by reducers which should be only doing some normal data processing. No UI operations, no more operations. Maybe I should save the processing status in state then render them when store updating.

But how to do this? A react component flow over the whole page? what happen with store updating from other actions? I mean they are more like events than state!

Even a worse case, what should I do when I have to use the native confirm dialog or alert dialog in redux/react apps? Where should they be put, actions or reducers?

Best wishes! Wish for replying.

Answer 1

I mean they are more like events than state!

I would not say so. I think loading indicators are a great case of UI that is easily described as a function of state: in this case, of a boolean variable. While this answer is correct, I would like to provide some code to go along with it.

In the async example in Redux repo, reducer updates a field called isFetching:

case REQUEST_POSTS:   return Object.assign({}, state, {     isFetching: true,     didInvalidate: false   }) case RECEIVE_POSTS:   return Object.assign({}, state, {     isFetching: false,     didInvalidate: false,     items: action.posts,     lastUpdated: action.receivedAt 

The component uses connect() from React Redux to subscribe to the store’s state and returns isFetching as part of the mapStateToProps() return value so it is available in the connected component’s props:

function mapStateToProps(state) {   const { selectedReddit, postsByReddit } = state   const {     isFetching,     lastUpdated,     items: posts   } = postsByReddit[selectedReddit] || {     isFetching: true,     items: []   }    return {     selectedReddit,     posts,     isFetching,     lastUpdated   } } 

Finally, the component uses isFetching prop in the render() function to render a “Loading...” label (which could conceivably be a spinner instead):

{isEmpty   ? (isFetching ? <h2>Loading...</h2> : <h2>Empty.</h2>)   : <div style={{ opacity: isFetching ? 0.5 : 1 }}>       <Posts posts={posts} />     </div> } 

Even a worse case, what should I do when I have to use the native confirm dialog or alert dialog in redux/react apps? Where should they be put, actions or reducers?

Any side effects (and showing a dialog is most certainly a side effect) do not belong in reducers. Think of reducers as passive “builders of state”. They don’t really “do” things.

If you wish to show an alert, either do this from a component before dispatching an action, or do this from an action creator. By the time an action is dispatched, it is too late to perform side effects in response to it.

For every rule, there is an exception. Sometimes your side effect logic is so complicated you actually want to couple them either to specific action types or to specific reducers. In this case check out advanced projects like Redux Saga and Redux Loop. Only do this when you are comfortable with vanilla Redux and have a real problem of scattered side effects you’d like to make more manageable.