💉 redux-inject-reducer-and-saga
Code highly influenced by react-boilerplate with some modifications If you need more informations read react-boilerplate docs they are great.
The library allows us to add reducers and sagas after the store was initialized. Since library wants to be universal and not decide what will be used it allows to use redux-thunk and redux-saga simultaneously. With preference to use redux-saga. The library is set to use immutable but developers can use simple object and arrays as state in reducers. react-router v4 is set and route reducer is included as default reducer.
Install:
yarn add redux-inject-reducer-and-saga
npm install --save-dev redux-inject-reducer-and-saga
Target browsers .babelrc
- adding polyfils is on the library consumer
- IE >= 10
- browsers:
["last 4 versions"]
Usage:
configureStore
Without parameters
- only default route reducer will be initialized
; const store = ;;/*Immutable.Map { "route": Immutable.Map { "location": null, },}*/
With reducers parameter
- reducers will be initialized with reducer's initialState
; { return state;} const reducers = config: staticReducer;const store = ;;/*Immutable.Map { "route": Immutable.Map { "location": null, }, "config": null, // 💉}*/
With reducers and initialState parameter
- reducers will be initialized with initialState argument
; { return state;} const reducers = config: staticReducer;const initialState = config: true;const store = ;;/*Immutable.Map { "route": Immutable.Map { "location": null, }, "config": true, // 💉} */
Inject Reducer and Saga
;;;;;; const getWrappedSagaComponent = { // constants const NAME_SEND = `/NAME_SEND`; const NAME_SET = `/NAME_SET`; // actions const nameSendAction = type: NAME_SEND payload: name ; const nameSetAction = type: NAME_SET payload: name ; // reducers const reducer = { }; // sagas { const name = actionpayload; ; } { ; } const withReducer = ; const withSaga = ; const withConnect = ; type Props = name: string void ; Component<Props any> { thisprops; } { return <span>thispropsname</span>; } // prettier-ignore return Component;}; const store = ; ; ;
Inject Reducer and use thunk
;;;;; const getWrappedThunkComponent = { // constants const NAME_SET = `/NAME_SET`; const nameSetAction = type: NAME_SET payload: name ; // reducers const reducer = { }; // thunks const nameSendThunk = ; const withReducer = ; const withConnect = ; type Props = name: string void ; Component<Props any> { thisprops; } { return <span>thispropsname</span>; } // prettier-ignore return Component;}; ;
More complex test: https://github.com/marcelmokos/redux-inject-reducer-and-saga/blob/master/src/configureStore.test.js