Javascript 如果一个操作依赖于Redux中的另一个异步操作，我该怎么办？

对不起我的英语，我希望你能理解我

我使用

redux thunk

进行异步操作

// actionA.js
export function actionA() {
  return fetch('api call')
           .then((data) => ({
             type: 'actionA',
             data: data
           }))
}

// reducer.js
export function reducer(state, action) {
  ...
  if(action.type === 'actionA') {
    return {
      ...,
      dataA: action.data,
      ...
    };
  }
}

// actionB.js
export function actionB() {
  return (dispatch, getState) => {
    if(!getState().dataA) {
      dispatch(actionA());
    }
    doSomethingWithDataA(getState().dataA);
  };
}

在某些情况下，我只需要分派

actionA

，而不分派

actionB

。但是当我分派

actionB

时，

actionB

将使用

dataA

，而

dataA

是由

actionA

创建的。因此，在

actionB

中，我将检查

Store

中是否有

dataA

，如果没有，我将首先发送

actionA

。但是

actionA

是一个异步操作，我无法在

actionA

完成时获取。

---

那么如何处理这个问题呢？

这种方法可能会有所帮助，请注意，我将使用polyfill返回对aysnc请求的承诺

function actionA(dataA) {
  return {
    type: 'actionA',
    data: dataA
  };
}


export function actionB() {
  return (dispatch, getState) => {
    if(!getState().dataA) {
      return fetch('api call')
          .then((data) => {
            dispatch(actionA(data))
          })
          .catch((error) => {// handle error})
    }
    return doSomethingWithDataA(getState().dataA);
  }
}

---

一般来说，当

dataA

准备好并且

actionB

已经发生时，您需要做一些事情。你可以使用

然后你的动作B变成如下

function lazyFetchDataA() {
    return (dispatch, getState) => {
        if(!getState().dataA) {
            return dispatch(actionA());
        } else {
            return Promise.resolve();
        }
    }
}

export function actionB() {
    return (dispatch, getState) => {
       lazyFetchDataA().then(() => dispatch({type: 'actionB'}))
    }   
}

这看起来很难，但现在您在适当的位置有了一些代码来完成您的工作

---

如果您能提供更多关于您的

doSomethingWithDataA

是什么的信息，那么您可能不必做这么困难的事情，我会给出一个更好的答案。

实际上，在

actionA

的

fetchDateFromServer（）

中，我只使用了fetch polyfill。问题是在某些情况下，我只需要分派

actionA

，而不分派

actionB

。

function lazyFetchDataA() {
    return (dispatch, getState) => {
        if(!getState().dataA) {
            return dispatch(actionA());
        } else {
            return Promise.resolve();
        }
    }
}

export function actionB() {
    return (dispatch, getState) => {
       lazyFetchDataA().then(() => dispatch({type: 'actionB'}))
    }   
}