如何在React-Redux中的不同多个组件上共享不同的状态

Question

我有Menu和MenuItem反应组件。

他们这样工作。

        <Menu openOnClick>
          <MenuItem target="/" text="Item 1" active />
          <MenuItem target="#" text="Item 2" parent>
            <MenuItem target="/" text="Item 3" />
            <MenuItem target="/" text="Item 4" />
          </MenuItem>
        </Menu>

        <Menu>
          <MenuItem target="/" text="Item 1" active />
          <MenuItem target="#" text="Item 2" parent>
            <MenuItem target="/" text="Item 3" />
            <MenuItem target="/" text="Item 4" />
          </MenuItem>
        </Menu>

通常，当鼠标悬停时， MenuItem打开，但我想提供下拉菜单的点击模式。

clickMode说明

所以MenuItem有clickMode状态。如果Menu （父组件）有openOnClick prop true（由用户给出），我希望这样，那么MenuItem clickMode状态应为true。

我在使用redux的MenuItem组件中实现了这一点。

const mapStateToProps = (state) => {
    console.log(state.menuReducer.clickMode)
    return {
        clickMode:state.menuReducer.clickMode
    }
}

但是如果有多个Menu组件则不起作用。因为redux store会更改每个dispatch事件。

这是redux状态日志。

这是Menu reducer。

export const menuReducer = (state = [], action) => {
    switch (action.type) {
        case menuConstants.CLICK_MODE:
            return {
                type: menuConstants.CLICK_MODE,
                clickMode: action.clickMode
            }
        default:
           return state;
    }
}

怎么办呢？

非常感谢您的帮助。

Answer 1

要做到这一点，你可以添加更高级别的抽象。 我认为在你的商店你有一些喜欢：

  const state: State = { menu:[ { //menuItem }, { //menuItem } . . . ] } 

我想你需要做那样的事情：

  const state: State = { menus: [ { menu:[ { //menuItem }, { //menuItem } . . . ] } ... ] } 

Answer 2

目前你正在你的状态中存储一个布尔值，我建议为每个菜单引入一个键（反应已经要求你完成它）并在处理程序中调度它。

所以你的行动看起来像这样：

const openOnClick = (id) => ({
  type: "CLICK_MODE",
  id: id
})

和你的减速机：

const initialState = {
  activeMenues: []
}

function reducer(state = initialState, action) {
 switch(action.type) {
   case "CLICK_MODE": return {
     ...state, 
     activeMenues: [...this.state.activeMenues, action.id]
   }
   ...
 }
}