Как лучше организовать редьюсер в Redux?

Question

[Игорь Шумиловский]

Всем привет! Подскажите, как лучше организовать структуру редьюсера(ов), если мне нужно вывести такое дерево:

root
--array1:
----[0]: { id: 1, elements: [1,1,1,1] }
----[1]: { id: 2, elements: [1,1,1,1] }
----[2]: { id: 3, elements: [1,1,1,1] }

В редьюсер приходить будут экшены как на добавление элементов array1. так и на добавление элементов в elements.
Как лучше это организовать? Элементы вынести в отдельный редьюсер? Не могли бы еще показать, как в данном случае мне добавить элемент в elements?

Является ли такой вариант верным?

case ADD_ELEMENT:
    var array2 = state.array1;
    array2[arrayIndex].elements.push({
      name: action.name
    })
    return {
      ...state,
      array1: [...array2],
    }

Answer 1

[Никита Гущин]

Насколько я понял, у вас есть две сущности (одна - root и одна в elements). Тогда это дело лучше хранить в нормализованном состоянии: делам два редьюсера, каждый работает со своей сущностью, а в селекторе денормализуем. При этом хранить сущности удобнее как { id: entity } объект, а не как массив.

// rootEntity reducer
const initialState = {
  entities: {}
}

function rootEntityReducer(state = initialState, action = {}) {
  switch(action.type) {
    case ADD_ELEMENT:
      const { targetEntityId, element } = action.payload
      const targetEntity = state.entities[targetEntityId]
      return {
        ...state,
        entites: {
          ...state.entities,
          [targetEntityId]: { ...targetEntity, elements: [ ...targetEntity.elements, element ] }
        }
      }
    default:
      return state
  }
}

UPD1 если entities - массив

// rootEntity reducer
const initialState = {
  entities: []
}

function rootEntityReducer(state = initialState, action = {}) {
  switch(action.type) {
    case ADD_ELEMENT:
      const { targetEntityId, element } = action.payload

      return {
        ...state,
        entites:  state.entities.map(
          entity => entity.id !== targetEntityId
            ? entity
            : { ...entity , elements: [ ...entity.elements, element ] }
        )
      }
    default:
      return state
  }
}

Comments

[Игорь Шумиловский]

а если entities тоже массив? Не перезатрет ли это другие индексы массива? Или это работает?

[Игорь Шумиловский]

Я попробовал сделать по-другому
return {
...state,
userSystems: userSystems(state.userSystems, action)
}

userSystems -> другой редьюсер, который делает
case ADD_USER_SYSTEM:
return [ ...state, {
id: action.id,
name: action.name,
elements: []
}]

Такой подход является верным?

[Никита Гущин]

Игорь Шумиловский: если entities - массив, то надо map делать, чтобы дубликатов не было (если это нужно конечно)

[Игорь Шумиловский]

Никита Гущин: Вы мне пролили свет, спасибо большое! Я не знал, что так можно делать, теперь все стало яснее и проще. Спасибо!

[Никита Гущин]

Игорь Шумиловский: рад помочь)

[Игорь Шумиловский]

Никита Гущин: если можно, то не подскажете еще, как можно обратиться к компоненту из другого компонента? (не прямого родственника). Например, по нажатию на кнопку, должен появиться попап, который расположен в другой ветви дерева приложения?