javascript - 在同一页面/路由上具有相同可重用 Redux React 组件的多个实例

Question

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

我们正在使用 React-Redux

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

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

问题详细信息:

我们有一个 Sectionheader 组件。它绑定(bind)到 redux 状态。

它监听 header 属性reducer SectionheaderReducer。

由于页面上有此 Sectionheader 的 2 个实例，因此它们往往会显示相同的值，因为它们绑定(bind)到相同的存储状态属性。

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

Answer 1

您需要实现某种命名实例的方法。这可以像传递一个键来区分组件和 reducer 一样基本。

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

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

只要记住在操作类型中使用命名空间，这样 reducer 就不会踩到脚趾

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

并确保reducer也具有命名空间

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

现在在组合 reducer 时添加 2 个命名空间 reducer

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

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

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

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

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

创建 reducer 与上面类似

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

还有一个Higher-Order Component如果您希望减少嵌套。