reducer-injectors
v1.0.4
Published
Library reducer-injectors help inject reducer in react-boilerplate
Downloads
3
Readme
reducer-injectors
reducer-injectors simplify reducer injection.
Master
Dev
Table of Contents
Changelog
- View Changelog
## Installation
Add the dependency
npm install --save reducer-injectors
Don't forget to install all the peers dependencies
npm install --save react@^15.6.1 react@^15.6.1 prop-types@^15.5.10 hoist-non-react-statics@^2.3.0 redux-logic@^0.12.2 redux@^3.7.2 redux-immutable@^4.0.0 invariant@^2.2.2 lodash@^4.17.4
If you are using a react-boilerplate, you might want to remove redux-saga
first and edit configureStore.js
to use redux-logic
instead.
You will need to edit your configureStore in your react-boilerplate project:
Here is the configuration of [email protected]
with our extension:
/**
* Create the store with dynamic reducers
*/
import { createStore, applyMiddleware, compose } from 'redux';
import { fromJS } from 'immutable';
import { routerMiddleware } from 'react-router-redux';
- import createSagaMiddleware from 'redux-saga';
import createReducer from './reducers';
- const sagaMiddleware = createSagaMiddleware();
export default function configureStore(initialState = {}, history) {
- // 1. sagaMiddleware: Makes redux-sagas work
- // 2. routerMiddleware: Syncs the location/URL path to the state
+ // 1. routerMiddleware: Syncs the location/URL path to the state
const middlewares = [
- sagaMiddleware,
routerMiddleware(history),
];
const enhancers = [
applyMiddleware(...middlewares),
];
// If Redux DevTools Extension is installed use it, otherwise use Redux compose
/* eslint-disable no-underscore-dangle */
const composeEnhancers =
process.env.NODE_ENV !== 'production' &&
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
// TODO Try to remove when `react-router-redux` is out of beta, LOCATION_CHANGE should not be fired more than once after hot reloading
// Prevent recomputing reducers for `replaceReducer`
shouldHotReload: false,
})
: compose;
/* eslint-enable */
const store = createStore(
createReducer(),
fromJS(initialState),
composeEnhancers(...enhancers)
);
// Extensions
- store.runSaga = sagaMiddleware.run;
+ store.createReducer = createReducer;
store.injectedReducers = {}; // Reducer registry
- store.injectedSagas = {}; // Saga registry
// Make reducers hot reloadable, see http://mxs.is/googmo
/* istanbul ignore next */
if (module.hot) {
module.hot.accept('./reducers', () => {
System.import('./reducers').then((reducerModule) => {
const createReducers = reducerModule.default;
const nextReducers = createReducers(store.asyncReducers);
store.replaceReducer(nextReducers);
});
});
}
return store;
}
Note: We also removed partially redux-saga
from it. It is not completely removed from the boilerplate. Check package.json
for more sagas stuff.
Usage
You can use injectReducer
to wrap your Containers component with it's store:
import injectReducer from 'reducer-injectors';
class HomePage extends React.PureComponent {
// ...
}
const withConnect = connect(mapStateToProps, mapDispatchToProps);
const withReducer = injectReducer({ key: 'home', reducer });
export default compose(
withReducer,
withConnect,
)(HomePage);
You can use our checkStore
where needed and remove the saga one from the boilerplate: utils/checkStore.js.
import { checkStore } from 'reducer-injectors';
Reminders
⚠️ When using this plugin, you must import in the first line of your application javascript entry file babel-polyfill
: ⚠️
import "babel-polyfill";
To enable ES features in older browsers, you MUST include in the package.json
"browserslist": ["ie >= 9", "last 2 versions"]
// or
"browserslist": ["ie >= 10", "last 2 versions"]