Route Change Before Action Creator Completes

In my react-redux application, I have an action creator which makes 4 server calls, first three calls are made async and then last one waits on the response of 3rd call. Lets us sa

Solution 1:

Method 1 -

If you want to show a non dismissible overlay to the user while your API call is running, you can do so like this -

//You can pass a prop like isShown to toggle the visibility, Here Modal component is used from **react-bootstrap** library//backdrop and keyboard false prop means it's non dismissible
<Modal className="loader" show={this.props.isShown} backdrop={false} keyboard={false}>
    <Modal.BodyclassName="text-center"><div><imgclassName="loader-image"src="https://d1ykm90fp7q29d.cloudfront.net/assets/images/misc/loader.gif"/></div><br/><h2> Loader text </h2></Modal.Body>
</Modal>

You can create a separate Modal component like above and import it where you want to use it. Visibility can be toggle by any state variable which is accessible in your api call.

Method 2 - Ideally, even if your route changes, it should not effect your action and action creators and your async api calls should run as it is. You may have not implemented the api calls properly. You can use redux saga like this -

Pseudo Code:

//Main sagafunction* mainSaga(params){
  const [result1, result2, result3]  = yieldall([
    call(apiCall1, params1), //function apiCall1 should call your Api1 call(apiCall2, params2),
    call(apiCall3And4, params3And4) //apiCall3And4 is another saga which is implemented below
  ])
}

//apiCall3And4 sagafunction* apiCall3And4(params){
  const call3result = yieldcall(apiCall3, params3);
  if(call3Result != null){
    //call api 4yieldcall(apiCall4, params4);
  }
}

Solution 2:

You can choose one of this:

• React Router (v4) supports preventing transitions
• Full client-side React App will do background calculations by default (it's called state of application).

Also you could use server-side rendering to prefetch data from API.