在同一页面/路由上具有相同的可重用redux反应组件的多个实例 [英] having multiple instance of same reusable redux react components on the same page/route

问题描述

我们正在创建一个大型的前端应用程序.

We are creating a large front-end application.

我们正在使用React-Redux

We are using React-Redux for it

我们正在创建一些可重用的组件.

We are creating some reusable components.

这个问题是关于在同一页面/路由上具有多个可重复使用的Redux React组件实例

我们有一个 Sectionheader 组件.哪个绑定到redux状态.

We have a Sectionheader component. Which is bound to redux state.

它侦听标题属性reducer SectionheaderReducer .

It listens to the header property reducer SectionheaderReducer.

由于我们在页面上有2个此 Sectionheader 实例，它们都倾向于显示相同的值，因为它们绑定到相同的商店状态属性.

As we have 2 instances of this Sectionheader on the page both tend to show same values as they are bound to the same store state-property.

如何使基于Redux的可重用React组件可配置?这样每个实例可以为化简器 SectionheaderReducer

How to make the redux based reusable react component configurable? So that each instance can have different value of header property for reducer SectionheaderReducer

推荐答案

您需要实现某种命名实例的方式.这可以作为传递区分成分和还原剂的键之类的基础.

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.

您可以在 mapStateToProps 函数中使用 ownProps 来引导映射到名称空间

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 {
        myState.value
    }
}

可以使用相同的方法将名称空间传递给 mapDispatchToProps

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 }
        default:
            return state
    {
}

现在在组合化简器时添加2个命名空间化简表

Now add the 2 namespaced reducers when combining reducers

combineReducers({
    myInstance1 : myReducer('myInstance1')
    myInstance2 : myReducer('myInstance2')
}

最后将名称空间传递给每个实例

Finally pass the namespace to each instance

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

免责声明::我是以下图书馆的主要撰稿人.

Disclaimer: I am the main contributor on the following library.

redux-subspace 可以提供更高级的命名空间实现，而您无需对于要为其具有多个实例的每个组件，请重新实现此模式.

redux-subspace can provide a more advanced namespacing implementation without you having to reimplement this pattern for every component you want to have multiple instances for.

创建减速器与上面类似

const reducer = combineReducers({ 
    myInstance1: namespaced('myInstance1')(myReducer)
    myInstance2: namespaced('myInstance2')(myReducer)
})

然后 SubspaceProvider 可用于切换每个组件的状态

Then SubspaceProvider can be used to switch out the state for each component

render() {
    return (
        <div>
            <SubspaceProvider mapState={state => state.myInstance1} namespace='myInstance1'>
                <MyComponent />
            </SubspaceProvider>
            <SubspaceProvider mapState={state => state.myInstance2} namespace='myInstance2'>
                <MyComponent />
            </SubspaceProvider>
        </div>
    )
}

只需确保还更改了 mapStateToProps 函数，以开始从提供程序中映射的子树开始遍历

Just ensure you also change your mapStateToProps function to so start traversing from the subtree mapped in the provider

const mapStateToProps = (state) {
    return {
        state.value
    }
}

还有一个高阶组件如果您想减少嵌套.

There is also a Higher-Order Component if you prefer to reduce nesting.

这篇关于在同一页面/路由上具有相同的可重用redux反应组件的多个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！