как изменить initialState в реакции-редуксе

Я использую react-redux для извлечения данных из базы данных MongoDB и помещения их в приложение React.
У меня есть следующая структура для работы:

const initialState = {
  Level: [{
    wId: Math.random(),
    Level1: [
      {
       id: Math.random(),
       item1: 'item1',
       item2: 'item2'
      },
      .......
    ],
    Level2: [
      {
       id: Math.random(),
       item1: 'item1',
       item2: 'item2'
      },
      .......
    ]
  }]
}

Редукс Функция:

export default function (state = initialState, action) {
  switch (action.type) {
    case GET_ITEMS:
      return {
        ...state,
        // what should i write here to get above mentioned state structure
      }
   ..............
}

Примечание:

  1. Изначально Level пусто. Таким образом, если в полезной нагрузке получены новые данные, то должна быть сформирована следующая структура.
  2. Как обновить определенные item, такие как item1 в level2

Пример ввода:

action.payload = {
    id1: 23234,             // should be assigned in Wid
    ITEM: [                 // Level1
        {
            id2: 89724,       // should be assigned in Level1.id
            i: 'abc',       // should be assigned in Level1.item1
            j: 'xyz'        // should be assigned in Level1.item2
        }
    ]
}

reactjs javascript object react-redux arrayobject
person kartik tyagi    schedule 29.07.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я не знаю, сколько предметов вы собираетесь получить, это будет сложно. Один из способов обойти эту проблему — сравнить предыдущее состояние с текущим состоянием и обновить только необходимую часть, которая была изменена.

Вы можете использовать количество библиотек или следовать любому ответу в Как определить равенство для два объекта JavaScript? для сравнения объектов.

В идеале вам потребуются разные действия для обновления уровня, уровня -> уровня 1 и так далее.

Создайте отдельные действия для добавления уровней. Вызовите это действие при пользовательских событиях, которые добавляют уровень к вашему начальному состоянию.

export default function (state = initialState, action) {
  switch (action.type) {
    case GET_ITEMS:
      return {
        ...state,
        // what should i write here to get above mentioned state structure
      }
   case ADD_LEVELS:
      return {
                ...state,
                Level: [...state.Level, action.payload.Level]
             }
}

Вы можете переместить логику генерации идентификатора в компонент, так как это сделает вашу жизнь проще.

person Ganesh chaitanya    schedule 29.07.2020
comment
да, количество предметов не определено, это тоже усложняет мне задачу. @ganeshchaitanya, можете ли вы сказать мне, как изменить состояние, сравнив предыдущее и текущее состояние со следующей структурой? немного кода поможет понять более четко. - person kartik tyagi; 30.07.2020
comment
@kartiktyagi: отредактировал мой ответ, чтобы объяснить более подробно - person Ganesh chaitanya; 30.07.2020