在同一页面/路由上具有相同的可重用redux反应组件的多个实例

小编典典

在同一页面/路由上具有相同的可重用redux反应组件的多个实例

reactjs

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

我们正在使用React-Redux

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

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

问题详细信息：

我们有一个Sectionheader组成部分。绑定到redux状态。

它侦听header属性reducer SectionheaderReducer。

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

如何使基于Redux的可重用React组件可配置？这样每个实例可以为reducer提供不同的header属性值SectionheaderReducer

阅读 450

2020-07-22

共1个答案

小编典典

您需要实现某种命名实例的方式。这可以像传递密钥以区分组件和减速器一样基本。

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

const mapStateToProps = (state, ownProps) {
    let myState = state[ownProps.namespace]
    return {
        myState.value
    }
}

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

const mapDispatchToProps = (dispatch, ownProps) {
    return {
        myAction: (myParam) => dispatch(myAction(ownProps.namespace, myParam))
    }
}

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

const myAction => (namespace, myParam) {
    return { type: `${namespace}/${MY_TYPE_CONSTANT}`, myParam }
}

并确保还对减速器进行命名空间

const myReducer = (namespace) => (state = initialState, action) => {
    switch(action.type) {
        case `${namespace}/${MY_TYPE_CONSTANT}`:
            return { ...state, action.myParam }
        default:
            return state
    {
}

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

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

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

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

免责声明： 我是以下库的主要贡献者。

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

创建减速器与上面类似

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

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

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

只需确保您也将mapStateToProps功能更改为从提供程序中映射的子树开始遍历即可

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

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

2020-07-22