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
• Installation
• Usage
• Reminders

---

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 react-boilerplate@v3.5 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"]