Split reducers operating on the same slice of data in redux - redux

Question

I have a store which is shaped like this:
{
// ...data
user: {
warranties: {
W_1: ['O_1', 'O_2'],
W_2: ['O_3', 'O_4']
}
}
}
Where keys starting with W_ are warranties, keys starting with O_ are options.
For each warranty I have one or more options associated to it, relations in user.warranties are in the form: warranty => [options].
To achieve it I'm combining my reducers like this:
rootReducer = combineReducers({
// ...other main reducers
user: combineReducers({
// ...other user reducers
warranties
})
})
Now, the "problem" is that both USER_WARRANTY and USER_OPTION actions are handled by the same reducer, because:
When I add an option, I need to push it to the correct warranty entry.
Inversely when I add a warranty I need to populate it with its default options.
And ultimately, they operate on the same slice of data
So the warranties reducer, has to react to both actions, looking like this:
export default function warranties(state = {}, action) {
switch (action.type) {
case USER_WARRANTIES_ADD:
// add warranty key to `user.warranties`
case USER_WARRANTIES_REMOVE:
// remove warranty key from `user.warranties`
case USER_OPTIONS_ADD:
// push option to `user.warranties[warrantyID]`
case USER_OPTIONS_REMOVE:
// remove option from `user.warranties[warrantyID]`
default:
return state
}
}
I would like to split this in two reducers, warranties and options, but still have them operate on the same slice of data.
Ideally I would then compose my root reducer like this:
rootReducer = combineReducers({
// ...other main reducers
user: combineReducers({
// ...other user reducers
warranties: magicalCombine({
warranties,
options
})
})
})
Where magicalCombine is the function I am having troubles to find.
I have tried reduce-reducers, but looks like the second reducer (options) is never actually reached, and I'm actually unsure about it since I'm not trying to achieve flat state, but actually operate on the same key.

Answer 1

A reducer is simple a function that take state and action and returns a new state object, so I think this would do what you want..
rootReducer = combineReducers({
// ...other main reducers
user: combineReducers({
// ...other user reducers
warranties: (state, action) => {
// state is state.user.warranties
// we pass it to each reducer in turn and return the result
state = warranties(state, action);
return options(state, action);
}
})
})
using reduceReducers should do the same thing (I haven't used it before, but that's what it looks like..)
rootReducer = combineReducers({
// ...other main reducers
user: combineReducers({
// ...other user reducers
warranties: reduceReducers(warranties, options)
})
})
combineReducers from redux is simply intentionally restricted to pass only the value of the state property that matches the key in the reducers object provided to it, it's not really special in any other way. see more here.. https://redux.js.org/recipes/structuringreducers/beyondcombinereducers