redux - 如何正确处理异步操作？

Question

我有一个异步操作

function fetch(url) {
  dispatch => {
    request(url).then(
      resp => dispatch({type: FETCH_SUCCESS, resp}),
      error => dispatch({type: FETCH_FALUIRE, error})
  );

}

UI 有一个列出所有项目的页面，当单击其中一个项目时，它会发送一个带有该项目 url 的操作。

当我先点击item1，然后快速点击item2，如果item2的响应返回时间早于item1。 store中item2的数据会被item1覆盖。

fetch('http://remote/items/item1'); //first
fetch('http://remote/items/item2'); // then

如何忽略 item1 的结果？或者我怎样才能让元素的发送总是在元素 1 之后触发

我能想到的是，在发送请求之前发送 url。

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})
    );
  }
}

在 reducer 中，我检查 url 来决定是否应该忽略响应。

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;
      }
    ...
  }

感谢您的帮助!

Answer 1

您的解决方案应该有效。至少如果你忽略一些疯狂的东西，比如

1. 请求 item1
2. 请求项目 2
3. 再次请求 item1。
4. 第三个请求正在返回。
5. 第一个请求失败。或者第一个请求返回，并且在请求之间更改了 item1。

或者，您可以让您的 fetch 函数仅在最近一次调用时分派(dispatch)事件。

const fetchLatest = (called => url => {
  const snapshot = ++called

  return dispatch => request(url).then(
    resp => snapshot === called && dispatch(...),
    error => snapshot === called && dispatch(...)
  )
})(0)