Odtnhj

In basically all Redux examples and documentations the example is shown when dealing with async requests that a boolean value, usually isFetching is toggled true when a request is made and false on success or fail.

When I load a page multiple API calls will be made from multiple components, I would like to show a loading indicator when any request to the API is being made. Therefore this might not be the best solution:

1. Action1 toggles isFetching as true and starts fetching from API


2. Action2 toggles isFetching as true and starts fetching from API


3. Action1 is finished and turns isFetching false even though Action2 is still loading.

How would you solve these kind of situations?

Thanks!

Convert isFetching to a number. Each pending call increments the number, while each success/failure decrements the number.

const reducer = (state = fetchingCounter: 0 , type ) => 
 switch(type) 
 FETCHING_PENDING:
 return fetchingCounter: state.fetchingCounter + 1 ;
 FETCHING_DONE:
 return fetchingCounter: state.fetchingCounter - 1 ;
 

 return state;
;

Add a selector that converts the number to a boolean -

const isFetching = ( isFetching ) => !!isFetching

Hopefully within a couple months, you'll be able to handle this very easily using the new fetcher/createResource concepts in conjunction with Suspense. You can see a description of this in Andrew Clark's Concurrent Rendering in React presentation around minute 25. But that is a future feature (Suspense is already available, but only integrated with code-splitting, not yet integrated with API calls).

So, for now, you have two main options:

• use a counter that you increment/decrement as you start/end api calls (it looks like Ori Drori has just posted an answer with this approach)


• use multiple booleans -- one for each api call involved and show the loading indicator if any are true. The only reason to use this over a counter is if you want your loading indicator to be more specific (i.e. use the specific booleans to indicate in some way what is being loaded)