Question

在处理程序中一个接一个地分派几个（同步）动作是个坏主意吗？

假设我有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中获取它。

我执行的每一次谷歌搜索都说看看redux thunk或者saga，但我很想知道为什么（以及如果）按照我的建议做一个坏主意。

感谢。

Answer 1

在我看来，以您描述的方式调度多个动作没有任何问题。

但是，当我想做类似的事情时，我遵循的模式是仅从处理程序中调度单个操作，然后使用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))
  }
}

做出反应/减少多重行动

1 个答案: