Which reducer gets used when using dispatch in mapDispatchToProps?

Question

I am learning about Redux and I have two reducers, a contactReducer to show contacts on the page and a testReducer to just mess around with. In one of my component files I have this function:

const mapDispatchToProps = (dispatch) => ({
  getContacts: () => dispatch({ type: "TEST_ACTION" }),
});

These are my two reducer files: contactReducer:

import { GET_CONTACTS } from "../actions/types";

const initialState = {
  contacts: [
    {
      id: 1,
      name: "John Doe",
      email: "john@gmail.com",
      phone: "555-555-5555",
    },
    {
      id: 2,
      name: "Karen Williams",
      email: "karen@gmail.com",
      phone: "444-444-4444",
    },
    {
      id: 3,
      name: "Henry Johnson",
      email: "henry@gmail.com",
      phone: "333-333-333",
    },
  ],
};

export default function (state = initialState, action) {
  switch (action.type) {
    case GET_CONTACTS:
      return {
        ...state,
      };
    default:
      console.log("testing action in contactReducer");
      return state;
  }
}

and testReducer:

import { GET_CONTACTS } from "../actions/types";

const initialState = {
  contactsTest: [
    {
      id: 1,
      name: "ffffffffffff",
      email: "john@gmail.com",
      phone: "555-555-5555",
    },
    {
      id: 2,
      name: "ggggggggggggg",
      email: "karen@gmail.com",
      phone: "444-444-4444",
    },
    {
      id: 3,
      name: "aaaaaaaaaaaaaa",
      email: "henry@gmail.com",
      phone: "333-333-333",
    },
  ],
};

export default function (state = initialState, action) {
  switch (action.type) {
    case "TEST_ACTION":
      return {
        ...state,
      };
    default:
      console.log("testing action");
      return state;
  }
}

So, what I noticed from the console.log statements in the reducer files was that for every contact, both the contactReducer and testReducer's function was called with this line:

  getContacts: () => dispatch({ type: "TEST_ACTION" }),
});

What if I have multiple reducers but I only want to call one of their functions for dispatch, what would I do?

Your action's `type` should be unique across all of your reducers. In Redux, all reducers of a store process every action - that's why the the default case just returns the previous state. — cbr, Jun 02 '20 at 19:19
ahhh okay then that makes sense. I am new to redux so I thought maybe two reducers might share the same type of action. — mastercool, Jun 02 '20 at 19:20
You absolutely can do that if both stores should react to the same action, just be aware of it in case that's *not* what you're trying to do. — cbr, Jun 02 '20 at 19:20
By the way, does this answer your question? [All reducers will be invoked when an action is dispatched?](https://stackoverflow.com/questions/33590579/all-reducers-will-be-invoked-when-an-action-is-dispatched) — cbr, Jun 02 '20 at 19:23

score 1 · Answer 1 · answered Jun 02 '20 at 19:44

1

combineReducers, Is a helper function in redux that helps you divide your reducers. take a look at this link: LINK

answered Jun 02 '20 at 19:44

Mahdi

1,355
1
12
28

Which reducer gets used when using dispatch in mapDispatchToProps?

1 Answers1