fundamental redux concept- how to actions launch reducers

user_6772980 0
Viewed 85

to make things simple consider these two reducers(written in typescript):

export type userActionTypes = 
    | Interface1
    | Interface2

const initialState1 =  {...//some state} //<--comment indicates some sort of values are present
const initialState2 =  {...//some state}

const reducer1 = (state = initialState1, action: userActionTypes){
    switch(action.type) {
        case action1.case1:
            return {...//some new state1}
        default: return state
    }
}

const reducer2 = (state = initialState2, action: userActionTypes){
    switch(action.type){
        case action2.case2:
            return {...//some new state1}
        default: return state
    }
}

const rootReducer = combineReducers({
    mReducer1: reducer1,
    mReducer2: reducer2
})

now say somewhere we call the following in our code:

newAction = {type: action2.type2, //some other values}
dispatch(newAction);

**my question is: ** How does react know which reducer to call? I mean, it doesn't pass the action to every reducer there is in the rootReducer, does it? I mean if that was the case, then all the default cases would be meaningless and all the cases in the case statements would have to be unique. That is not possible, is it?
How does react know which reducer to call?

reducers react-redux redux typescript reactjs
1 Answers

How does react know which reducer to call? I mean, it doesn't pass the action to every reducer there is in the rootReducer, does it?

Trick question, redux actually calls all of your reducers.

Consider your root reducer:

const rootReducer = combineReducers({
  mReducer1: reducer1,
  mReducer2: reducer2
})

This creates a reducer function tree. When an action is dispatched to the store it calls the root reducer and passes the current state and the current action. The reducers in turn recursively call their nested combined reducers, passing state and action until they reach a leaf where you hit a reducer function and compute their next state. They either have a case to handle action or the return the default case which is simply their current state. The recursion goes back up, returning each next state slice piece, combined at each level until you arrive back at the root reducer which returns the entire next state object.

I mean if that was the case, then all the default cases would be meaningless and all the cases in the case statements would have to be unique. That is not possible, is it?

Remember that each reducer function is operating on only its little slice of state, not the entire state object. The default case is there for the reducer to return its current state value since there is no work for it to do. All the reducer cases within a reducer function should be unique. If two actions trigger the same state update then they should be grouped

case "case1":
case "case13":
  // both cases apply the same update
user_86908570
Related