Extension on the combineReducer method as available in Redux libraries
$ npm install --save combine-reducers-enhanced
How to use
;const rootReducer =ui:login: loginReducermain: mainReducerdata: dataReducerconst enhancedRootReducer = ;let store: Store = enhancedRootReducer;
Reason for creation
Every redux library provides us with a method called
combineReducers (if you don't know this check the documentation. This method is really helpful but has its limitations. This library was created to fix one of this limitations.
Current situation with combineReducers
During design of your state tree, you typically divide it up into different sections. F.e.
ui: uiReducerdata: dataReducer
@ngrx/store provides the
combineReducers method to easily work with such structures.
If you want to work with multiple levels of nesting in your state tree, you need to do something else F.e.
ui:login:...main: ...data: ...
In that case, you'd could:
- Write a uiReducer yourself which delegates every action related to login to a loginReducer and every 'main' related action to the mainReducer.
- Use a utility such as: https://github.com/brechtbilliet/create-reducer-tree which handles this for you
- Nest the combineReducers method like this:
const rootReducer =ui:data: dataReducer
Option 1 provides you with extra work and option 2 forces you to work with a third party library. I personally prefer option 3 where you nest the combineReducers method inside your tree. This could actually be easily integrated into the current combineReducers method and make the following possible:
rootReducer =ui:login: loginReducermain: mainReducerdata: dataReducerrootReducer
It's a lot cleaner than approach where you nest the combineReducers method yourself. This implemented by making the combineReducers function recursive.
MIT © KwintenP