Как можно разделить разные состояния на разных компонентах в 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.

Я достигаю этого в компоненте MenuItem с избыточным кодом.

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

Но если есть несколько Menu компонентов, они не работают. Потому что redux сохраняет изменения при каждом событии отправки.

Вот журналы избыточного состояния.

Вот Menu редуктор.

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

Answer 2

Для этого вы можете добавить более высокий уровень абстракции.Я думаю, что в вашем магазине у вас есть что-то вроде:

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

Я думаю, вам нужно сделать что-то подобное:

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