Redux can I use one action type in separate reducers?

mtwallet picture mtwallet · Nov 10, 2016 · Viewed 17k times · Source

I have a situation in my Redux application where I currently have 3 separate reducers that handle the fetching of data from an api. An example of one of my reducers would be:

const INITIAL_STATE = {
  data: [],
  loading: false,
  error: ''
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GET_ALL_ORDERS_START:
      return {
        ...state,
        loading: true
      };
    case GET_ALL_ORDERS_SUCCESS:
      return {
        ...state,
        allOrders: action.payload,
        loading: false
      };
    case GET_ALL_ORDERS_FAIL:
      return {
        ...state,
        loading: false,
        error: action.payload
      };
    default:
      return state;
  }
};

Note the loading and error states, these are identical in each current reducer and will be for any subsequent reducers I write that involve fetching data from the api.

I would like to add a further reducer that is used only for the loading and error pieces of state. The other 3 would store the data.

This would give me:

Data reducers x 3

const INITIAL_STATE = {
  data: []
  // any other state in the future
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GET_ALL_ORDERS_SUCCESS:
      return {
        ...state,
        allOrders: action.payload
      };
    default:
      return state;
  }
};

Loading / Error reducer (handles loading / error for entire app)

const INITIAL_STATE = {
  loading: false,
  error: ''
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GET_ALL_ORDERS_START:
      return {
        ...state,
        loading: true
      };
    case GET_ALL_ORDERS_SUCCESS:
      return {
        ...state,
        loading: false
      };
    case GET_ALL_ORDERS_FAIL:
      return {
        ...state,
        loading: false,
        error: action.payload
      };
    default:
      return state;
  }
};

As you can see this means the GET_ALL_ORDER_SUCCESS action type will be used in 2 separate reducers. My question is, is this ok? or does it go against convention?

Many thanks in advance.

Answer

julianljk picture julianljk · Nov 10, 2016

I think that's perfectly fine. There is no place to states that Actions and Reducers have a 1:1 mapping. In fact, creator of Redux explicitly says that there is no relation between them, many reducers can react to a single actions, a single reducer can react to multiple actions.

I think he says it best: https://github.com/reduxible/reduxible/issues/8

Tweet: https://twitter.com/dan_abramov/status/691608868628119552

Relevant SO: Redux: Why not put actions and reducer in same file?