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

Question

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

我们正在使用React-Redux

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

**这个问题是关于在同一页面/路线上有多个相同的可重复使用的redux反应组件的实例**

问题详情:

我们有一个Sectionheader组件.它与redux状态绑定.

它侦听header属性reducer SectionheaderReducer.

由于我们在页面上有2个此Sectionheader实例,因此它们都会显示相同的值,因为它们绑定到同一个store-property.

如何使基于redux的可重用反应组件可配置.因此每个实例可以为减速器具有不同的头属性值SectionheaderReducer

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

并确保reducer也是命名空间

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

现在在组合reducers时添加2个名称空间缩减器

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

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