redux multiple instances of same component
snippet in javascript

redux multiple instances of same component


//You need to implement some way of namespacing the instances. This can be as basic as passing in a key to differentiate the components and reducers.

//You can use the ownProps in your mapStateToProps function to guide the mapping to a namespace

const mapStateToProps = (state, ownProps) {
    let myState = state[ownProps.namespace]
    return {
//The same method can be used to pass on a namespace to the mapDispatchToProps

const mapDispatchToProps = (dispatch, ownProps) {
    return {
        myAction: (myParam) => dispatch(myAction(ownProps.namespace, myParam))
//Just remember to use the namespace in the action type so the reducers don't tread on toes

const myAction => (namespace, myParam) {
    return { type: `${namespace}/${MY_TYPE_CONSTANT}`, myParam }
//And make sure the reducer is namespaced too

const myReducer = (namespace) => (state = initialState, action) => {
    switch(action.type) {
        case `${namespace}/${MY_TYPE_CONSTANT}`:
            return { ...state, action.myParam }
            return state
//Now add the 2 namespaced reducers when combining reducers

    myInstance1 : myReducer('myInstance1')
    myInstance2 : myReducer('myInstance2')
//Finally pass the namespace to each instance

render() {
    return (
            <MyComponent namespace='myInstance1' />
            <MyComponent namespace='myInstance2' />