Redux - relation of reducers to actions

Question

I am new to react/redux. I am trying to figure out how all the pieces in redux interact. The one thing giving me trouble is understanding the relation between actions and reducers. When an action is called, how does the store know which reducer to use? Does it base it completely on the action type name? Do type names have to be unique? To whom or what does the reducer pass the new state object to, the store or the action?

As I understand it, it goes like this:

1. store.dispatch(action) is called
2. store finds the related reducer based on action type
3. Reducer clones the current state object, makes the changes, passes it back (somewhere)

Thordis

Answer 1

1: how does the store know which reducer to use -> This is based entirely on the action type.

2: Do type names have to be unique? -> This is not a rule. But mostly, yes. Each action has a distinct type name and the corresponding reducer gets invoked.

3: To whom or what does the reducer pass the new state object to, the store or the action? -> The reducer does not pass the new state object anywhere. Basically, it triggers a state change event to all your react components that are listening to it. All components listening to the changed state get re-rendered, with the new version of the state, thereby updating your DOM.

Acus

Thanks. I am starting to piece things together now. – Thordis

Answer 2

In a typical Redux setup, the actions are dispatched to ALL reducers and it's up to the reducers to decide if they care about that action. A common pattern is a switch in the reducer that checks action.type, has cases for actions it cares about and a default case that just returns the current state like this:

export default (state = false, action) => {
  switch (action.type) {
    case START_LOADING:
      return true;
    case STOP_LOADING:
      return false;
    default:
      return state;
  }
}

In this case, I am telling my reducer it only cares about the actions with type START_LOADING or STOP_LOADING and that in all other cases it should just return it's previous state.

For a good understanding of Redux (and Flux) I'd suggest you check out Code Cartoons by Lin Clark or her video which covers most of the same things.

Automotive

Ah, key here is "actions are dispatched to ALL reducers and it's up to the reducers to decide if they care about that action." – Chiasma

Answer 3

Generally, you only have one reducer responsible for the complete state.

This reducer can be split up into different smaller reducer functions each responsible for a different slice of the state. For example Redux's combineReducers() utility could do that, but you can also do it by hand.

If you use combineReducers(), each of the reducer functions is executed for each dispatched action. They then decide purely based on the action type whether the action should affect its slice of the state. If so, an updated copy of this slice is returned. If its slice is not affected by the action, it is returned unchanged.

Tharpe

What if there is an isolated relationship between a particular reducer and its action so that every time an action dispatches, the action.type is only matched with the cases inside the respective reducer instead of matching the type with all the reducers represented by the rootReducer inside the combineReducers(). Please explain it. Thanking in advance. – Birch