ReduxHMRRegistry

Enable code splitting for redux

Installation

NPM:

$ npm install --save redux-hmr-registry

Yarn:

yarn add redux-hmr-registry

Import

In ES6: import { MiddlewareRegistry, ReducerRegistry, combineLazyReducers } from 'redux-hmr-registry'

Use with redux

Here an example to create store and enabling code splitting with redux:

import { applyMiddleware, compose, createStore } from 'redux'
import { MiddlewareRegistry, ReducerRegistry, combineLazyReducers } from 'redux-hmr-registry'

const reducers = {
  hello: (state = 'Hello World!') => state
}

const middlewareRegistry = new MiddlewareRegistry({
  middlewares: {
    myMiddleware: store => next => action => {
      /* ... */
    }
  }
})

const middlewares = [middlewareRegistry.createMiddleware()]

const store = createStore(
  combineLazyReducers(reducers),
  compose(applyMiddleware(...middlewares))
)

const reducerRegistry = new ReducerRegistry({
  reducers,
  registerListener: (dynamicReducers) => {
    store.replaceReducer(combineLazyReducers(dynamicReducers, store.getState()))
  }
})

Later in your code:

// For register to a new middleware
middlewareRegistry.register('dynamicMiddleware', dynamicMiddleware)
// For register to a new reducer
reducerRegistry.register('dynamicMiddleware', dynamicMiddleware)

API

combineLazyReducers (Function)

Combines reducers and returns a new reducer that must be passed to redux.

If you use connected-react-router you can pass reducer create by combineLazyReducers to connectRouter(history) ex: connectRouter(history)(combineLazyReducers(reducers))

Arguments:

• reducers (Object): an object when each property is a reducer function
• [initialState] (Object): usefull if you need to set initial state of reducer that not exist or has been removed.

MiddlewareRegistry (ES6 Class)

Enable code splitting for redux middlewares

Constructor:

• [options={}] (Object):
  • [middlewares={}] (Object): a key/value object where key is name of middleware and value the middleware itself

Methods:

• createMiddleware: returns a middleware to use with redux
• register(name, middleware): adds name middleware
  • name (String): middleware name
  • middleware (Function): redux middleware
• unregister(name): removes name middleware
  • name (String): middleware name

ReducerRegistry (ES6 Class)

Enable code splitting for redux reducers

Constructor:

• [options={}] (Object):
  • [reducers={}] (Object): a key/value object where key is name of reducer and value the reducer itself
  • [registerListener] (Function): function called when register or unregister a reducer. Usefull to call store.replaceReducer(/*...*/) to dynamically replace redux reducer.

Methods:

• register(name, reducer): adds name reducer
  • name (String): reducer name
  • reducer (Function): redux reducer
• setRegisterListener(listener): set listener call on register and unregister
  • listener (Function): a function that takes registered reducers in first argument
• unregister(name): removes name reducer
  • name (String): reducer name