如果某個操作取決於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); 
    } 
}