Как я могу обновить глубоко вложенный объект внутри массива? - PullRequest
Новая
       6

Как я могу обновить глубоко вложенный объект внутри массива?

0 голосов
/ 11 декабря 2018

Здравствуйте добрые люди из стека!Я работаю над приложением реаги-редукс и пытаюсь обновить свойство глубоко вложенной структуры в моем редукторе.Структура данных выглядит следующим образом, и я хочу обновить свойство text: 

state = {
  assessment: {
    requirements: [
      questions: [
        {
          text
        }
      ] 
    ]
  }
}

, поэтому я попробовал следующее: 

// reducer code...
return {
  ...state,
  [assessmentId]: {
    ...state[assessmentId],
    requirements: [
      ...state[assessmentId].requirements, 
      [requirementId]: [
        ...state[assessmentId].requirements[requirementsId],
        questions: [
          ...state[assessmentId].requirements[requirementsId].questions,
          [questionId]: {
            text: action.payload.response.text
          },
        ],
      ] ,
    ],
  },
};

Это скорее псевдокод, чем реальный код для удалениясложность.Я не вижу каких-либо изменений в инструментах для создания избыточного кода, поэтому мне интересно, допустил ли я ошибку в способе получения вложенных объектов и элементов массива.

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

1 Ответ

0 голосов
/ 12 декабря 2018

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

import produce from "immer";

// reducer code...
return produce(state, draft => {
  draft[assessmentId].requirements[requirementsId].questions[questionsIndex].text = action.payload.response.text;
});

Я бы сказал, что ваша проблема связана с тем, что questions является массивом, который требует немного больше усилий, чтобы сохранить прямолинейность, чем состояние на основе объекта.questions был объектом.Возможно, вам просто нужно удалить синтаксис [questionId], например, 

questions: [
  ...state[assessmentId].requirements[requirementsId].questions,
  { text: action.payload.response.text },
],

. Тем не менее, текстовый объект будет установлен как новый элемент в конце массива.

В зависимости от того, что вынужно сделать (то есть то, что уже существует в массиве, и пытаетесь ли вы добавить или обновить), вы захотите прочитать:

https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns#inserting-and-removing-items-in-arrays

https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns#updating-an-item-in-an-array

...