CODEWITHSUNDEEP
reactjsreact-reduxredux-saga
Ayan
Ayan

Reputation: 8896

How to handle request-in-flight case to show loader using redux saga?

In my redux-saga app, multiple api calls can happen simultaneously, and thus individual loaders and api response success/error messages need to be shown.

How to handle such scenarios?

For example, the following redux state is generally maintained: 

{
 data : {},
 isError: false,
 isLoading: true
}

Here isLoading flag changes to true when api call is awaiting response.

isError flag turns true when api response returns error.

data stores successful response from api

The above approach works fine when simultaneous api calls don't happen.

How to handle the case when simultaneous different api calls are happening?

Upvotes: 0

Views: 255

Answers (1)

Prakash Karena
Prakash Karena

Reputation: 2605

For this type of scenario :

Instead of using state globally 

{
 data : {},
 isError: false,
 isLoading: true
}

We can use state individually

like in each different api call we can use different reducers and that different reducers we can set isError and isLoading individually.

Now in rootReducer we are assigning our all reducers in different-different way like responseOfApi1 , responseOfApi2 , etc and we can access it like props.responseOfApi1,props.responseOfApi2 in our component.

Now we can define isLoading as state in individual component and check if any props.responseOfApi1.isLoading || props.responseOfApi2.isLoading then we can setState({isLoading : true }) and if props.responseOfApi1.isLoading && props.responseOfApi2.isLoading setState({isLoading : false })

Upvotes: 1

Related Questions