Добавить в уже существующий объект свойство и положить в него объект redux

157
01 декабря 2021, 23:50

У меня имеется такая вложенность в редьюсере 

initialState = {
  prop1: {
    props2: {
      prop3: {id: '123', text: '222'},
      prop4: {id: '321', text: '555}
    }
  }
}

Мне нужно при срабатывании экшена на добавление задачи получить следующее

initialState = {
  prop1: {
    props2: {
      prop3: {id: '123', text: '222'},
      prop4: {id: '321', text: '555'},
      newprop: {id: '555', text: 'dasdadasd'}
    }
  }
}

Как это можно реализовать? Как бы я не пытался у меня постоянно перетирается существующий объект новым свойством, попытка задать новое свойство провалилась, причем свойство по сути у меня совпадает с ID которое будет в объекте, т.к. его я передаю через action.payload[0]

Answer 1

Стандартными средствами, без зависимостей: 

return Object.assign({}, state, {
  prop1: {
    ...state.prop1,
    props2: {
      ...state.prop1.props2,
      newprop: { id: '555', text: 'dasdadasd' }
    }
  }
});

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

Я не совсем понял где именно в action.payload лежит объектное значение нового свойства, поэтому в примере написал это значение литералом вместо клонирования (вида { ...action.payload.data }).
В том случае, если у значения нового свойства тоже будет вложенность - нужно глубоко клонировать его тем же способом, как в примере клонируется стейт.

Для сильно сложных/объемных структур, советую использовать глубокое клонирование средствами сторонней библиотеки, например Lodash.

READ ALSO
Калькулятор на чистом JS
javascript

Калькулятор на чистом JS

Я недавно начал изучать JS (чистый) и решил создать калькуляторНесколько сделать удалось, но с одним не могу разобраться вот уже 10-ый день

 132
Почему телеграм не отображает превью конкретно моей ссылки?
HTML

Почему телеграм не отображает превью конкретно моей ссылки?

К примеру, когда я делюсь ссылкой на другие сайты, телеграм подхватывает и делает превью, однако в случае с моим веб-ресурсом такое не происходит:

 370
Как работать со встраиваемой БД?
Java

Как работать со встраиваемой БД?

Я использую Intellij IDEA для сборки проекта(javafx + hibernate), но после создания jar файла база не может быть найдена (чисто теоретически я могу создать...

 219
Удалить ссылку на последний элемент массива после удаления элемента массива
Java

Удалить ссылку на последний элемент массива после удаления элемента массива

У меня есть следующий метод, который удаляет элемент массива объектов:

 421