如何在使用React-Router＆Redux時單擊鏈接時調度操作？

Question

假設我有一個Link ，它將我發送到一個頁面，用於添加/編輯列表條目。

當我單擊Link本身時，如何調度Redux操作，以便在實際重定向到該頁面之前，我可以先更新Redux存儲。

例如：我點擊編輯按鈕 - >調度操作 - >存儲更新， {'state': 'edit-mode'} - >繼續重定向。

或者你有另一種方法來完成我想要做的事情嗎？

也許當組件已經安裝時，我會根據某些條件運行stateToEdit類的操作？ 如果是的話，那么請向我展示你的方式。 謝謝

PS：我只使用一個組件進行所有添加/編輯/刪除。 所以我正在考慮一種基於state進行渲染的方法，無論是edit-mode還是delete-mode等。

Answer 1

您可以通過以下幾種方式解決此問題：

1. 而不是使用Link ，嘗試使用帶有onClick函數的browserHistory.push(path) 。
   • 在onClick ，您可以dispatch您的操作，然后push送到新位置。
   • 但是，如果要在各種組件中執行這一系列操作，則可能會遇到代碼重復問題。
2. 解決此問題的一種更強大的方法是實現redux-thunk ，它提供執行多個“操作”的通用方法（無論是調用Redux操作，還是執行異步操作，或兩者兼而有之！）以響應更改。
   • Dan在這里有一個很好的回應，強調了redux-thunk實際提供的簡單性： 我可以在沒有Redux Thunk中間件的情況下調度多個動作嗎？
   • 在您的情況下，在incrementTwice函數中，假設只是通過調用browserHistory.push(action.path)替換其中一個dispatch(increment)調用，類似於以下內容：

Redux thunk行動

export const dispatchThenRoute = (myAction, myPath) => {
    return (dispatch) => {
        dispatch(myAction)
        browserHistory.push(myPath);
    }
};