combineReducer and shape of the state - redux

Question

In "Basic Reducer Structure" in Redux docs, It is stated that:
A typical app's state shape might look roughly like:
{
domainData1 : {},
domainData2 : {},
appState1 : {},
appState2 : {},
ui : {
uiState1 : {},
uiState2 : {},
}
}
Or
{
simpleDomainData1: {....},
simpleDomainData2: {....},
entities : {
entityType1 : {....},
entityType2 : {....}
},
ui : {
uiSection1 : {....},
uiSection2 : {....},
}
}
Now I use combineReducers and I need to know how can I achieve this structure
considering combineReducers behavior which is that a corresponding key is set in state object for each reducer that is passed to combineReducers.
Do I have to have a reducer created for domainData1, domainData2, appState1, appState2 and ui?
Or there is another way for defining the shape of state like this?
Is it possible to disable combineReducers's behavior of adding key for each reducer to state?

Answer 1

combineReducers takes an object full of slice reducer functions, and
creates a function that outputs a corresponding state object with the
same keys.
For redux documentation this is definition of combine reducer.
Do I have to have a reducer created for domainData1, domainData2, appState1, appState2 and ui?
Yes, define reducer for each one and combine the reducer for each of them.
Like :
{
domainData1: domainData1Reducer,
domainData2: domainData2Reducer,
appState1 : appState1Reducer,
appState2 : appState1Reducer,,
ui: uiReducer,
}
Is it possible to disable combineReducers's behavior of adding key for each reducer to state
No, with combine Reducer you can't. But you can write your implementation for this.
Or there is another way for defining the shape of state like this?
Yes, we can do this too in single Reducer also.If you want.

Answer 2

// don't provide keys to reducers that don't supply them
const filterReducer = (reducer) => {
let lastState = undefined;
return (state, action) => {
if (lastState === undefined || state == undefined) {
lastState = reducer(state, action);
return lastState;
}
var filteredState = {};
Object.keys(lastState).forEach( (key) => {
filteredState[key] = state[key];
});
var newState = reducer(filteredState, action);
lastState = newState;
return newState;
};
}

Answer 3

This is what I did:
First I created simpleDomainData1, simpleDomainData2, entityType1 , entityType2 , and uiSection1 and uiSection2 .
And then I Combined entityType1 and entityType2 like this:
const entities = combineReducers({
entityType1,
entityType2,
});
const ui = combineReducers({
uiSection1,
uiSection2,
})
or instead you can create your own combineReducers function and use that:
const entities = (state, action) => {
entityType1: entityType1(state.entityType1),
entityType2: entityType2(state.entityType2)
}
const ui = (state, action) => {
uiSection1: uiSection1(state.uiSection1),
uiSection2: uiSection2(state.uiSection2)
}
And after that:
const allReducers = combineReducers({
simpleDomainData1,
simpleDomainData2,
entities,
ui
});
Now the state shape will look like this:
{
simpleDomainData1: {....},
simpleDomainData2: {....},
entities : {
entityType1 : {....},
entityType2 : {....}
},
ui : {
uiSection1 : {....},
uiSection2 : {....},
}
}