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

Question

I have Menu and MenuItem react components.

They works like this.

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

Normally MenuItem opens as dowpdown when mouse over but I want to provide also click mode for dropdown.

clickMode illustrate

So MenuItem has clickMode state.I want to this if Menu (parent component) has openOnClick prop true (given by user) then MenuItem clickMode state should be true.

I am achiving this in MenuItem component with redux.

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

But if there are multiple Menu component it doesn't work.Because redux store change every dispatch event.

Here is redux state logs.

Here is 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;
    }
}

How can handle this?

Many thanks for help.

Answer 1

To do that you can add a high level more of abstraction. I think in your store you have somethig like:

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

I think you need to do somethink like that:

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

Answer 2

Currently you are storing a boolean in your state, I would suggest to introduce for every Menu a key ( react already asked you to do it anyway ) and in the handler to dispatch it.

so your action would look something like this:

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

and your reducer:

const initialState = {
  activeMenues: []
}

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