how to handle async actions correctly? - redux

Question

I have a async action
function fetch(url) {
dispatch => {
request(url).then(
resp => dispatch({type: FETCH_SUCCESS, resp}),
error => dispatch({type: FETCH_FALUIRE, error})
);
}
}
UI has a page to list all items, when click one of them, it dispatchs a action with url of that item.
when I click item1 first, then I click item2 quickly, if the response of item2 returns earlier than item1. the data of item2 in store will be overwritten by item1.
fetch('http://remote/items/item1'); //first
fetch('http://remote/items/item2'); // then
How can I ignore the result of the item1? or how can I make dispatch of item always trigger after item1
what I can think of is, dispatch the url before send request.
function fetch(url) {
dispatch => {
dispatch({type: FETCH_START, url});
request(url).then(
resp => dispatch({type: FETCH_SUCCESS, resp, url}),
error => dispatch({type: FETCH_FALUIRE, error, url})
);
}
}
in the reducer, I check the url to decide if I should ignore the response.
function reduceFetch(state = initialState, action) {
switch(action.type) {
case FETCH_START:
return {initialState, action.url};
case FETCH_SUCCESS:
if (state.uri === action.url) {
return {state, resp: action.resp};
} else {
return state;
}
...
}
}
Thanks for your help!

Answer 1

Your solution should work. Atleast if you ignore something crazy like
Request item1
Request item2
Request item1 again.
Third request is comming back.
First request failed. Or first request is comming back and item1 was changed in between the requests.
Alternatively you could make your fetch function to dispatch events only on the latest call.
const fetchLatest = (called => url => {
const snapshot = ++called
return dispatch => request(url).then(
resp => snapshot === called && dispatch(...),
error => snapshot === called && dispatch(...)
)
})(0)