Skip to content

Instantly share code, notes, and snippets.

@dylants
Last active September 11, 2016 13:37
Show Gist options
  • Save dylants/b22717d7bbdaec91a32f0537e2ae1d69 to your computer and use it in GitHub Desktop.
Save dylants/b22717d7bbdaec91a32f0537e2ae1d69 to your computer and use it in GitHub Desktop.
Dynamically add reducers or state to a Redux application, using parent/child reducers
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, {
...
});
...
}
}
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;
}
...
}
}
import parentReducer from './parent.reducer';
export default combineReducers({
...
// only add the parent reducer to the redux state, not the child reducer
parentState: parentReducer,
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment