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

问题描述

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

我们正在为此使用 React-Redux

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

这个问题是关于在同一页面/路由上有多个相同的可重用 redux react 组件的实例

问题详情:

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

它监听头属性reducer SectionheaderReducer.

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

如何使基于 redux 的可重用 React 组件可配置?这样每个实例都可以为reducer SectionheaderReducer

设置不同的header 属性值

解决方案

您需要实现一些命名空间实例的方法.这可以像传入一个键来区分组件和减速器一样基本.

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

const mapStateToProps = (state, ownProps) {让 myState = state[ownProps.namespace]返回 {myState.value}}

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

const mapDispatchToProps = (dispatch, ownProps) {返回 {myAction: (myParam) =>调度(myAction(ownProps.namespace，myParam))}}

记住在动作类型中使用命名空间，这样减速器就不会踩到脚趾

const myAction =>(命名空间，myParam){返回 { 类型:`${namespace}/${MY_TYPE_CONSTANT}`，myParam }}

并确保 reducer 也是命名空间

const myReducer = (namespace) =>(state = initialState, action) =>{开关(动作.类型){案例`${namespace}/${MY_TYPE_CONSTANT}`:返回 { ...状态，action.myParam }默认:返回状态{}

现在在组合减速器时添加 2 个命名空间减速器

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

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

render() {返回 (<div><MyComponent namespace='myInstance1'/><MyComponent namespace='myInstance2'/>

)}

免责声明:我是以下库的主要贡献者.

redux-subspace 可以提供更高级的命名空间实现，而无需您为每个你想要拥有多个实例的组件重新实现这个模式.

reducer 的创建与上面类似

const reducer = combineReducers({myInstance1: 命名空间('myInstance1')(myReducer)myInstance2:命名空间('myInstance2')(myReducer)})

然后可以使用SubspaceProvider来切换每个组件的状态

render() {返回 (<div><SubspaceProvider mapState={state =>state.myInstance1} namespace='myInstance1'><我的组件/></SubspaceProvider><SubspaceProvider mapState={state =>state.myInstance2} namespace='myInstance2'><我的组件/></SubspaceProvider>

)}

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

const mapStateToProps = (state) {返回 {状态值}}

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

We are creating a large front-end application.

We are using React-Redux for it

We are creating some reusable components.

This question is regarding having multiple instance of same reusable redux react components on the same page/route

Problem details:

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

It listens to the header property reducer SectionheaderReducer.

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.

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.

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
    }
}

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
    {
}

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 can provide a more advanced namespacing implementation without you having to reimplement this pattern for every component you want to have multiple instances for.

Creating the reducers is similar to above

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

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>
    )
}

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 react 组件实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！