react-redux-dynamic-reducer

react-redux-dynamic-reducer

This library provides React bindings for redux-dynamic-reducers, enabling reducers to be attached when components are mounted.

How to use

1. Create the store

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

...

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

Please refer to the redux-dynamic-reducer for more details on creating the store.

2. Combine a component with a reducer

The withReducer higher-order component (HOC) can be used to bundle a reducer into a component that will automatically be attached into the store when mounted. This method will also mount the component within a subspace for easy access to it's reducer. Please refer to the redux-subspace documentation for configuring the subspace to work with any middleware, enhancers or other extensions you are using.

import { withReducer } from 'react-redux-dynamic-reducer'

export default withReducer(myReducer, 'defaultKey')(MyComponent)

3. Mount the component

import MyComponent from './MyComponent'

<Provider store={store}>
    ...
      <MyComponent />
    ...
</Provider>

Multiple instances of the same component can be added, as long as the have unique instance identifiers:

import MyComponent from './MyComponent'

...

const MyComponent1 = MyComponent.createInstance('myInstance1')
const MyComponent2 = MyComponent.createInstance('myInstance2')

...

<Provider store={store}>
    <MyComponent1 />
    <MyComponent2 />
</Provider>

Additional state can be mapped for the component or an instance of the component my providing an additional mapper:

export default withReducer(myReducer, 'defaultKey', { mapExtraState: (state, rootState) => ({ /* ... */ }) })(MyComponent)

...

const MyComponentInstance = MyComponent
    .createInstance('instance')
    .withExtraState((state, rootState) => ({ /* ... */ }) })

...

const MyComponentInstance = MyComponent
    .createInstance('instance')
    .withOptions({ mapExtraState: (state, rootState) => ({ /* ... */ }) })

The extra state is merged with the bundled reducer's state.

By default, the components are namespaced. If namespacing is not wanted for a component or and instance of the component, an options object can be provided to prevent it:

export default withReducer(myReducer, 'defaultKey', { namespaceActions: false })(MyComponent)

...

const MyComponentInstance = MyComponent.createInstance('instance').withOptions({ namespaceActions: false })

Combined components and reducers can be nested as deep as required, but note, the nested reducer will appear at the top level of the redux state.

Examples

Examples can be found here.