guifeliper/example-redux-injectors

Example of how to dynamically load redux reducers and redux-saga sagas as needed, instead of loading them all upfront.

Dynamically load redux reducers and redux-saga sagas as needed, instead of loading them all upfront. This has some nice benefits, such as avoiding having to manage a big global list of reducers and sagas. It also allows more effective use of code-splitting. See motivation. As used by react-boilerplate.

Motivation

My motivation to create this repository was to facilitate those that are trying to implement the redux-injectors library, but do not find a full example version. I have faced some issues to implement the library and a full example version would help me on that moment.

Getting Started

To start the project:

yarn start

To understand the implementation go to the file configureStore.js or with the following code:

const staticReducers = {
  default: defaultReducer,
}

function createReducer(asyncReducers) {
  return combineReducers({
    ...staticReducers,
    ...asyncReducers
  })
}

export default () => {
  let composeEnhancers = compose;
  const sagaMiddleware = createSagaMiddleware();
  const runSaga = sagaMiddleware.run;
  
  // If Redux Dev Tools and Saga Dev Tools Extensions are installed, enable them
  /* istanbul ignore next */
  if (process.env.NODE_ENV !== 'production' && typeof window === 'object') {
    /* eslint-disable no-underscore-dangle */
    if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__)
    composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({});
  }
  
  const injectEnhancer = createInjectorsEnhancer({
    createReducer,
    runSaga,
  })
  
  const store = createStore(
    createReducer(),
    composeEnhancers(
      applyMiddleware(sagaMiddleware),
      injectEnhancer
    )
  );
      
  store.asyncReducers = {};

  return store;
};