redux-dynamic-reducer

redux-dynamic-reducer

This is a library to create Redux stores that can have additional reducers dynamically attached at runtime.

It is based on an example proposed by Dan Abramov in a StackOverflow answer.

What it does

Redux only supports a single root reducer for the store. When designing the store structure, combineReducers can be used to combine multiple reducers into a single reducer for the store. However, you cannot add more reducers to the combination after the store has been created.

That's where this library fits in. It allows you to provide a single root reducer but also provide additional reducers to be merged into the root reducer after the store is created.

It also provides a useful utilities to package a component with a related reducer and attach it when the component is mounted.

When to use it

• You do not know which reducers are required when creating the store.
• You want to split your bundle and some reducers will only be available after the import is resolved.

How to use

1. Create the store

The createStore function can be used to create store that can have reducer dynamically attached. It is a drop-in replacement for the built-in Redux version:

import { combineReducers } from 'redux'
import { createStore } from 'redux-dynamic-reducer'

...

const reducer = combineReducers({ staticReducer1, staticReducer2 })
const store = createStore(reducer)

Initial State and Middleware

The createStore function also supports all of the optional parameters that the built-in Redux createStore function does:

const store = createStore(reducer, { initial: 'state' })

const store = createStore(reducer, applyMiddleware(middleware))

const store = createStore(reducer, { initial: 'state' }, applyMiddleware(middleware))

2. Add a dynamic reducer

The store now has a new function on it caller attachReducers:

store.attachReducers({ dynamicReducer })

Multiple reducers can be attached as well:

store.attachReducers({ dynamicReducer1, dynamicReducer2 })

Reducers can also be added to nested locations in the store:

store.attachReducers({
    some: {
        path: {
            to: {
                dynamicReducer
            }
        }
    }
} )

store.attachReducers({ 'some.path.to': { dynamicReducer } } } })

store.attachReducers({ 'some/path/to': { dynamicReducer } } } })

Examples

Examples can be found here.

Limitations

• Each dynamic reducer needs a unique key
  • If the same key is used in a subsequent attachment, the original reducer will be replaced
• Nested reducers cannot be attached to nodes of the state tree owned by a static reducer