CODEWITHSUNDEEP
reduxreact-redux
JimmyBoy
JimmyBoy

Reputation: 369

react / redux multiple actions

is it a bad idea to dispatch several (synchronous) actions one after the other in a handler?

lets assume I have 3 buttons: buttonA, buttonB and buttonC.

for my first reducer it is important to know which button was clicked so it might look like this:

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;
    }
}

but my second reducer just wants to know when a button was clicked (doesn't care which button). I know I can make it like this:

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;
    }
}

but, what if I have 1000 buttons? can I just make my second reducer look like this?:

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;
    }
}

and from the handler dispatch 2 actions for every button click, one for the specific button (BUTTON_A_CLICKED) and one general (BUTTON_CLICKED)

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

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

of course this is a silly example and I can just dispatch BUTTON_CLICKED and in the action data send which button was clicked and if any reducer is interested in that info - it can take it from the action obj..

every googling I performed says to look at redux thunk, or saga, but I am curious to understand why (and if) it is a bad idea to do what I suggested.

Thanks.

Upvotes: 1

Views: 774

Answers (1)

biofractal
biofractal

Reputation: 19153

In my opinion there is nothing wrong with dispatching multiple actions in the way you describe.

However, when I want to do something similar, the pattern I follow is to only dispatch a single action from the handler and then use redux-thunk to allow this primary action to dispatch subsequent actions.

Here is an example, taken from live code, of me dispatching multiple actions from within a single action. The actions.modelSelect function returns a 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))
  }
}

Upvotes: 1

Related Questions