Dynamically add reducers or state to a Redux application, using parent/child reducers

child.reducer.js

const initialState = {
  ...
};

export default function childReducer(state = initialState, action) {
  switch (action.type) {
    // process the actions as you would normally in any reducer
    case CHILD_REDUCER_ACTION:
      return Object.assign({}, state, {
        ...
      });
    ...
  }
}

parent.reducer.js

import childReducer from './child.reducer';

const initialState = {
  loading: false,
  error: null,
  ...
  childStates: [],
};

export default function parentReducer(state = initialState, action) {
  switch (action.type) {
    // process parent reducer actions as you would normally
    case PARENT_REDUCER_ACTION:
      ...

    // special add child action
    case ADD_CHILD_ACTION: {
      // clone the state before modifying it
      const updatedState = _.cloneDeep(state);

      // grab the initial state from the child reducer
      const childState = childReducer(undefined, {});

      // add the child state to the list contained within this parent state
      updatedState.childStates.push(childState);

      // return the updated state
      return updatedState;
    }

    // the parent reducer listens for any child reducer actions, and forwards them on appropriately...
    case CHILD_REDUCER_ACTION: {
      // clone the state before modifying it
      const updatedState = _.cloneDeep(state);

      // determine which child should be modified
      const { childId } = action;

      // grab that child state from your parent state
      let childState = updatedState.childStates[childId];

      // use the child reducer to modify the child state, passing in the action
      childState = childReducer(childState, action);

      // update the state with the changes made
      updatedState.childStates[childId] = childState;

      // return the updated state
      return updatedState;
    }

    ...
  }
}

root.reducer.js

import parentReducer from './parent.reducer';

export default combineReducers({
  ...
  // only add the parent reducer to the redux state, not the child reducer
  parentState: parentReducer,
});