複数のアクションを反応させる/還元する

Question

ハンドラで複数の（同期的な）アクションを1つずつディスパッチするのは悪い考えですか？

ボタンA、ボタンB、ボタンCの3つのボタンがあるとします。

私の最初の減速のために、次のようになりますので、クリックされたボタンを知ることが重要である：

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） と一つの一般的に1つ（BUTTON_CLICKED）

当然の

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

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

この愚かな例であり、私はちょうどBUTTON_CLICKEDと、ボタンがクリックされたアクションデータ送信中と任意の減速は、その情報に興味がある場合に派遣することができます - それは、アクションからそれを取ることができOBJ ..

私が実行したすべてのグーグルでは、還元サンク、またはサガを見ると言われていますが、なぜ私が示唆したことをするのは悪い考えです。

ありがとうございました。

Answer 1

私の意見では、あなたが記述する方法で複数のアクションをディスパッチすることには何も問題はありません。

しかし、私が似たようなことをしたいときは、ハンドラから1つのアクションをディスパッチし、redux-thunkを使用して、このプライマリアクションが後続のアクションをディスパッチできるようにします。

ここでは、1つのアクション内から複数のアクションをディスパッチする私のライブコードの例を示します。 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)) 
    } 
}