react/redux多個動作

在處理程序中一個接一個地分派幾個（同步）動作是一個壞主意嗎？react/redux多個動作

讓我們假設我有3個按鈕：buttonA，buttonB和buttonC。

我的第一個減速知道哪個按鈕被點擊，所以可能看起來像這樣重要的是：

const firstReducer = function(state = [], action){ 

    switch(action.type) { 

     case types.BUTTON_A_CLICKED: 
      console.log("button a was clicked"); 
      return state.concat("a"); 

     case types.BUTTON_B_CLICKED: 
      console.log("button b was clicked"); 
      return state.concat("b"); 

     case types.BUTTON_C_CLICKED: 
      console.log("button c was clicked"); 
      return state.concat("c"); 

     default: 
      return state; 
    } 
}

但我的第二個減速只是想知道的是單擊按鈕時（不關心哪按鈕）。我知道我可以這樣做：

const secondReducer = function(state = [], action){ 

    switch(action.type) { 

     case types.BUTTON_A_CLICKED: 
     case types.BUTTON_B_CLICKED 
     case types.BUTTON_B_CLICKED 
      console.log("some button was clicked"); 
      return state.concat("button"); 

     default: 
      return state; 
    } 
}

但是，如果我有1000個按鈕？我可以讓我的第二減速器這個樣子的？：

const secondReducer = function(state = [], action){ 

    switch(action.type) { 

     case types.BUTTON_CLICKED: 
      console.log("some button was clicked"); 
      return state.concat("button"); 

     default: 
      return state; 
    } 
}

，並從處理器派遣2分的動作，每按一下按鈕，一個面向特定按鈕（BUTTON_A_CLICKED）和一個普通（BUTTON_CLICKED）

onClickHandler(){ 
    dispatch({ 
      type: ACTION_TYPES.BUTTON_A_CLICKED, 
     }); 

     dispatch({ 
      type: ACTION_TYPES.BUTTON_CLICKED, 
     });

當然

這是一個愚蠢的例子，我可以調度BUTTON_CLICKED和動作數據發送哪個按鈕被點擊，如果任何減速機感興趣的是信息 - 它可以把它從動作OBJ ..

我執行的每個搜索結果都表示要查看重複數據或傳奇，但我很想知道爲什麼（如果）按照我的建議做是個壞主意。

感謝。

來源

2016-10-26 JimmyBoy

在我看來，以您描述的方式分派多個操作沒有任何問題。

但是，當我想要做類似的事情時，我遵循的模式是僅從處理程序派發單個操作，然後使用redux-thunk來允許此主要操作派發後續操作。

下面是一個從實時代碼中取得的例子，我從一個單獨的動作中調度多個動作。該actions.modelSelect函數返回一個thunk：

actions.modelSelect = modelId => { 
    return (dispatch, getState) => { 
    const state = getState() 
    const model = getModelById(state, modelId) 
    dispatch({ 
     types, 
     type: types.modelSelect, 
     local: true, 
     data: model 
    }) 
    dispatch(actionHub.USAGE_LIST_FILE_SERVER()) 
    dispatch(actionHub.USAGE_LIST_FILE_MSAPI(modelId)) 
    dispatch(actionHub.BUILD_LIST(modelId)) 
    } 
}

來源

2016-10-26 10:37:14 biofractal

所以我想我應該進入終極版 - 咚的某個時候，好像每個人都使用它。謝謝。 – JimmyBoy

redux-thunk允許您將特殊類型的操作視爲功能。這意味着您可以使用特定的與動作相關的邏輯來擴展純動作。您提供的需要派發與另一個操作相關的操作的示例對於redux-thunk（或類似的包）非常適用。 – biofractal

react/redux多個動作

回答

相關問題