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
... const reducer = const store =
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.
myReducer 'defaultKey'MyComponent
3. Mount the component
<Provider store=store> ... <MyComponent /> ...</Provider>
Multiple instances of the same component can be added, as long as the have unique instance identifiers:
... const MyComponent1 = MyComponentconst MyComponent2 = MyComponent ... <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:
myReducer 'defaultKey' /* ... */ MyComponent ... const MyComponentInstance = MyComponent ... const MyComponentInstance = MyComponent
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:
myReducer 'defaultKey' namespaceActions: false MyComponent ... const MyComponentInstance = MyComponent
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.