logic-injectors
v1.0.5
Published
Library logic-injectors help to inject logic into components
Downloads
10
Readme
logic-injectors
logic-injectors npm package simplify redux-logic integration in react boilerplate by providing replacement tools for redux-saga
removal.
Master
Dev
Table of Contents
Changelog
- View Changelog
## Installation
Add the dependency
npm install --save logic-injectors
Don't forget to install all the peers dependencies
npm install --save react@^15.6.1 react-dom@^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.
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 { createLogicMiddleware } from 'redux-logic';
import createReducer from './reducers';
- const sagaMiddleware = createSagaMiddleware();
export default function configureStore(initialState = {}, history) {
// Create the store with the two middlewares
+ const injectedHelpers = {
+ request,
+ forwardTo(location) {
+ history.push(location);
+ },
+ };
+ const logicMiddleware = createLogicMiddleware([], injectedHelpers);
- // 1. sagaMiddleware: Makes redux-sagas work
+ // 1. logicMiddleware: Enable logic
// 2. routerMiddleware: Syncs the location/URL path to the state
const middlewares = [
- sagaMiddleware,
+ logicMiddleware,
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.logicMiddleware = logicMiddleware;
store.injectedReducers = {}; // Reducer registry
- store.injectedSagas = {}; // Saga registry
+ store.injectedLogics = {}; // Logic 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 injectLogic
to wrap your Containers component and it's logic:
import injectLogic from 'logic-injectors';
class HomePage extends React.PureComponent {
// ...
}
const withConnect = connect(mapStateToProps, mapDispatchToProps);
const withReducer = injectReducer({ key: 'home', reducer });
const withLogic = injectLogic({ key: 'home', logic });
export default compose(
withReducer,
withLogic,
withConnect,
)(HomePage);
You can use our checkStore
where needed and remove the saga one from the boilerplate: utils/checkStore.js.
import { checkStore } from 'logic-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"]