This package has been deprecated

Author message:

This library is no longer being maintained. Please see https://github.com/ioof-holdings/redux-dynamic-reducer/issues/16 for more details.

redux-dynamic-reducer
TypeScript icon, indicating that this package has built-in type declarations

2.0.2 • Public • Published

redux-dynamic-reducer

npm version npm downloads License: MIT

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

Readme

Keywords

none

Package Sidebar

Install

npm i redux-dynamic-reducer

Weekly Downloads

265

Version

2.0.2

License

BSD-3-Clause

Unpacked Size

25 kB

Total Files

15

Last publish

Collaborators

  • mpeyper
  • ozwolf