只有在前一個操作成功時調度redux動作

情況如下：我需要調用一些API端點傳遞我先前請求的認證令牌。問題是這樣的令牌可以到期，所以我想打電話給端點檢索數據，每次我需要確保令牌是有效的，如果需要更新。只有在前一個操作成功時調度redux動作

目前我有一個異步操作，更新令牌和另一組從API檢索數據的操作。

我的目標是做出某種方面編程/兩個動作組成，如：

renewTokenIfNeeded = ... // action that check if token has expired and renew it getData = ... // Retrieves data from API realGetData = compose(renewTokenIfNeeded, getData);

的想法是realGetData行動檢查令牌已過期，調用renewTokenIfNeeded且僅當此行動成功然後調用getData。

對此有任何模式？謝謝。

來源

2017-01-25 EricSonaron

我認爲你可以創建一個操作，返回一個函數而不是一個對象，並使用redux-thunk中間件。返回一個功能的操作並非純粹的，你可以賺更多的功能調用和行動中執行多個分派。因此，它可能看起來像：

getData =() => async (dispatch, getState) => { 
    await renewTokenIfNeeded() 
    getData() 
    // Any dispatches you may want to do 
}

確保您的redux-thunk中間件添加到您的商店如文檔鏈接提及。

來源

2017-01-25 12:53:39

您可以使用redux thunk或任何其他中間件（例如REDX傳奇）來解決令牌問題。 Redux thunk可以讓動作創建者返回一個函數，而不是一個動作。

export function checkTokenValidity(token) { 
    return (dispatch) => { 
      dispatch(TOKEN_CHECK_REQUEST()); 
    return (AsyncAPICall) 
    .then((response) => { 
     dispatch(TOKEN_CHECK_SUCCESS(response.data)); 
    }) 
    .catch((err) => { 
     console.log(err); 
    }); 
    }; 
} 

export function getData(id) { 
     return (dispatch) => { 
       dispatch(GETDATA_REQUEST()); 
     return (AsyncAPICall(id)) 
     .then((response) => { 
      dispatch(GETDATA_SUCCESS(response.data)); 
     }) 
     .catch((err) => { 
      console.log(err); 
     }); 
     }; 
    } 

export function checkTokenAndGetData(token,id) { 
    return (dispatch) => { 
    dispatch(checkTokenValidity(token)).then(() => { 
     dispatch(getData(id)); 
    }); 
    }; 
}

這種方法的問題是代碼很容易混亂，因爲每次都必須將令牌檢查和任意API調用結合起來。

這是一個好一點。（2）（如果你想在動作創建者中調用它進行狀態跟蹤）在請求中傳遞令牌，讓一箇中間件攔截請求並將響應改爲「無效令牌/過期令牌」，或者真正的數據有一個乾淨可讀的前端代碼。

export function getData(token,id) { 
     return (dispatch) => { 
       dispatch(GETDATA_REQUEST()); 
     return (AsyncAPICall(id)) 
     .then((response) => { 
      //if response is EXPIRED token 
      dispatch(renewToken()); // renew token is another action creator 
      //else 
      dispatch(GETDATA_SUCCESS(response.data)); 
     }) 
     .catch((err) => { 
      console.log(err); 
     }); 
     }; 
    }

我的建議是將您的令牌驗證移動到您的後端。（3）總是在請求中傳遞令牌，讓中間件攔截請求，如果它過期，請在後端代碼中更新它。爲您的回覆添加一個標識符，表明它已過期並將其更新。簡單得多。

來源

2017-01-25 13:32:26 pierreg

只有在前一個操作成功時調度redux動作

回答

相關問題