Redux-Saga can help ajax request-response squence issue?

Hello 😃

Recently i met AJAX response sequence problem for dispatching single property in redux single store.

Each dispatching process work with below action sequence.

1. Change browser location by history API and Router.onEnter invoke action creator (react-router)

2. 'FETCH_OBJECTS_REQUEST'    // dispatching before request ajax. (no data update)

3. axios.get('/api/file/{objectId}')   // fetching data

4. 'FETCH_OBJECTS_SUCCESS'    // update single store

4-1. 'FETCH_OBJECTS_FAIL'    // just show errors

The problem is. API response time depend to ‘objectId’ parameters.

For example. each /file/{objectId} takes time to /file/A -> 1s, /file/B -> 5s.

User access to /file/A page. and move to /file/B by click some links and go back by browsers ‘back’ button immediatly.

In this case.

API request order

0--------------1--------------2--------------3--------------4--------------5
[/file/A]  [/file/B]  [/file/A]

API response order will be

0--------------1--------------2--------------3--------------4--------------5
               [/file/A]        [/file/A]                          [/file/B]

Browser location will be /file/A. but result of /file/B reducer. store data fill with B object data.

So i plan to validate each response by ‘currentObjectId’ and ‘lastAPIToken’ before reducing them. For example, after third request sent. the state will be currentObjectId: 'A', lastAPIToken: '3'. then every reducer validate response data whether matched with flag state before dispatch. so response of first /file/A and last /file/B will be ignored.

Instead of make upper validation. Is Redux-Saga can help this situations? as i expected, takeLatest accept second response?

[kuy]

@minhyeong-kim Yes, you don’t need to write validation logic because the previously spawned task is always cancelled by takeLatest function internally.

1. [A] Task A is spawned by FETCH_OBJECTS_REQUEST action
2. [A'] Receive AJAX result and Task A was finished successfully
3. [B] Task B is spawned (there is no running tasks at this time)
4. [C] Before Task C is spawned, Task B (waiting AJAX response) is cancelled. Then Task C is started.

[yelouafi]

@kuy Appreciate your help (and other contributions). Thanks!