如果某个操作取决于Redux中的另一个异步操作，该怎么办？

Question

对不起，我希望你能理解我。

我使用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完成时我无法获得。 那么如何处理这个问题呢？

Answer 1

一般来说，你想要做的事时dataA准备和actionB没有发生过。您可以使用middleware

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

做那么你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'})) 
    } 
} 

它看起来很难，但现在你必须在适当的地方在于做你的事的代码小块。

如果你提供更多的信息，你可能不需要做这么难的事情，我会给出更好的答案。

Answer 2

此方法可能有所帮助，请注意我将使用fetch填充以返回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); 
    } 
}