Action acting on multiple stores

Question

I have an action that needs to flow data in its own store but also in a config store. I need this because the data added is different & it also get cleared differently.

I'm wondering in that case if it would be better to use combine reducers? Or acting on multiple store is an acceptable solution?

import { PAGE_CHANGE_TITLE } from 'actions/types/page.types';
import { PROJECT_SELECTED } from 'actions/types/projects.types';

const initialState = {
  pages: {
    last: {},
    current: {},
    last5: [],
  },
  project: localStorage.getItem('project') || {},
};

export function configs(state = initialState, action) {

  switch (action.type) {

  case PAGE_CHANGE_TITLE:

    const last5 = [...state.pages.last5];
    last5.unshift(action.data);
    if (last5.length > 5) {
      last5.pop();
    }

    return {
      ...state,
      pages: {
        last: {
          ...state.pages.current,
        },
        current: {
          ...action.data,
        },
        last5: last5,
      },
    };

  case PROJECT_SELECTED:
    return {
      ...state,
      project: {
        ...action.data,
      },
    };

  default:
    return state;
  }
}

Answer 1

Use reducer composition, whether with combineReducers() or some manual approach. It is very common to have different reducers handling the same action.

In Redux, we almost never suggest you to use multiple stores.