react / redux multiple actions - redux

Question

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.

Answer 1

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