How to split reducer under 1 key? - reactjs

Question

I want to separate a reducer into N more combining together 1 key.
Say I have an initial state:
const STATE_INITIAL = {
nested_component: {
field1: 1,
field2: 2
},
upper_field: 3
}
Then I have a reducer:
function reducer(state=STATE_INITIAL, action){
switch(action){
case ACTION_UPPER_FIELD:
return ...
case ACTION_GRID1:
return ...
case ACTION_GRID2:
return ...
default:
return state;
}
}
Why I want to do it?
I want to have a component that I can reuse throughout the project. It would always come with its initial state and would have its reducer that I'd like to connect to the rest of the application.
My solution
One way I can think of is stacking cases for grid actions, providing it with state.gridand its own initial state and combing the result with the state:
const STATE_INITIAL = {
nested_component: {},
upper_field: 3
};
function reducer(state=STATE_INITIAL, action){
switch(action){
case ACTION_UPPER_FIELD:
return ...
case ACTION_GRID1:
case ACTION_GRID2:
return reducerGrid(state.grid, action);
default:
return state;
}
}
const STATE_INITIAL_GRID = {
field1: 1,
field2: 2
};
function reducerGrid(state = STATE_INITIAL_GRID, action) {
switch(action){
case ACTION_GRID1:
return ...
case ACTION_GRID2:
return ...
default:
return state;
}
}
Is there a standardized approach or is my solution fine? The things I don't like about it is the default in the reducerGrid seems redundant now and I am also not satisfied with having to repeat the actions in both reducers.
My 2nd Solution
function reducer(state=STATE_INITIAL, action){
const stateGrid = reducerGrid(state.grid, action)
let stateNew = state;
if(stateGrid !== state.grid){
stateNew = {...state, grid: ...stateGrid}
}
switch(action){
case ACTION_UPPER_FIELD:
return {...stateNew, ... };
default:
return stateNew;
}
}
3rd Solution
function reducer(state=STATE_INITIAL, action){
const stateNew = {...state, grid: ...reducerGrid(state.grid, action)};
switch(action){
case ACTION_UPPER_FIELD:
return ...
default:
return stateNew;
}
}

Answer 1

I have finally found a solution I am satisfied with.
Using this method:
import R from 'ramda';
function splitReducers(reducers, rest) {
return (state, action) => {
const reducersPrepared = R.mapObjIndexed((reducer, key) => {
return reducer(R.defaultTo({}, state)[key], action);
})(reducers);
const getUndefinedIfEmpty = R.ifElse(
R.isEmpty,
() => undefined,
R.identity
);
const stateWithoutSplitKeys = R.pipe(
R.omit(R.keys(reducers)),
getUndefinedIfEmpty
)(state);
return R.merge(
reducersPrepared,
rest(stateWithoutSplitKeys, action)
);
}
}
I can write my state tree in the following way:
Ports: splitReducers({
grid: reducerGrid,
}, reducer);
This will result in the object with keys split:
{
Ports: {
grid: {...},
isSaving: true,
isVisible: false
}
}
After applying the method the root-reducer is showing more of its state at the first glance:
export const rootReducer = combineReducers({
pageAllocation: combineReducers({
tabNetwork: combineReducers({
popupNetworkTemplates: reducerPopupNetworkTemplates,
gridPorts: splitReducers({ // <----- HERE IT IS
grid: reducerGridPortsOnly
}, reducerPorts),
}),
tabStorage: () => ({}),
activeTab: reducerPortsActiveTab
}),