Create substates to isolate your components. Heavily relies on react-redux
React Redux Substate requires React 0.14 or later.
npm install --save-dev react-redux-substate
The example is based on Dan Abramov Redux Tutorials (here on egghead.io)
// import mandatory functions
import { connectSubstate, reduceSubstate, substateReducer } from 'react-redux-substate'
// connect your component like you do with react-redux connect function (parameters are the same)
const TodoApp = connectSubstate()(() => {
return (
<div>
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
)
})
// create your reducer then wrap it in reduceSubstate
const todoApp = reduceSubstate(combineReducers({
todos,
visibilityFilter,
// add this reducer at the end :
_substates: substateReducer
}))
const store = createStore(todoApp)
// finally, add a "substateId" prop to the components you want to isolate
// a child component can have a different substateId if you want to target another substate
ReactDOM.render(
<Provider store={store}>
<div>
<TodoApp substateId="1" />
<TodoApp substateId="2" />
</div>
</Provider>,
document.getElementById('root')
)This is a wrapper of the react-redux connection function.
Refer to the react-redux doc for more information : connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
Wrap your reducer with this function so the state will be reduced to only the substate specified in the action.
connectSubstate will wrap your component (no injection) and act like a provider to give access to the substateId inside the context.
The dispatch method will be wrapped to add a substateId parameter to the action.
Then the reducer will get the substateId and reduce the state to only the part asked for the next reducers.
This is a very simple way to add substates to the components. It does not ensure fractality of the components because substates are stored in the app state.
All fresh and a long way to go !
MIT