对不起,我的英语,希望您能理解我。

我使用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,并且dataAactionA创建。因此,在actionB中,我将检查dataA中是否存在Store,否则,我将首先调度actionA。但是actionA是一个异步操作,完成actionA后我无法理解。
那么如何解决这个问题呢?

最佳答案

一般来说,您想在dataA准备好并且actionB发生时做一些事情。您可以使用middleware

function myMiddleware() {
    return store => next => action => {
        const dataA = store.getState().dataA;
        if(store.getState().dataA && action.type === 'actionB') {
            doSomethingWithDataA(dataA);
        }
    };
}

然后你的 Action 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是什么,则可能不必做那么困难的事情,我会给出更好的答案。

10-08 17:41