Как лучше менять state в редюсер если структура это состовной объект?

Question

[Pogran]

У меня есть вот такая структура

const initialState = {
	_id: '',
	structure: {
		0: {
			id: 0,
			_key: false,
			_value: 1,
			type: 'object',
			childIds: []
		}
	},
	name: '',
	createdAt: '',
	updatedAt: ''
};

И я делаю action для изменения одного элемента в structure
делаю вот так

const updateChildLevelNode = structure => {
				const { id, value, key } = action;

				structure[id]._value = value;
				structure[id]._key = key;

				return structure;
			};

			return {
				...state,
				structure: updateChildLevelNode(state.structure)
			};

Может есть какой практичнее способ чтобы не создавать функцию updateChildLevelNode , а сразу же в return всё сделать?

Answer 1

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

Во-первых: вы неверно обновляете структуру - ни в коем случае нельзя мутировать объект.
Во-вторых: почему сразу не сформировать объект action с нужными названиями свойств? (_key, _value)

const action = {
  id: 132,
  _key: 'some key',
  _value: 564
}

return {
  ...state,
  structure: {
    ...state.structure,
    [id]: { ...(state.structure[id] || {}), ...action },
  }
}

Выражение ниже нужно чтобы не получить ошибку, если вдруг state.structure[id] === udefined. Если вы уверены, что такого никогда не случится - можете оставить только ...state.structure[id].
...(state.structure[id] || {})

UPD1. Удаление объекта

Если вы используете lodash (или аналоги) в своем проекте, то удалить можно следующим образом:

import _ from 'lodash'

const { id, parentId } = action
// удаляем из структуры свойство с именем id
const nextStructure = _.omit(state.structure, id)
return {
  ...state,
  structure: {
    ...nextStructure,
    [parentId]: {
      ...nextStructure[parentId],
      childIds: nextStructure[parentId].childIds.filter(cId => cId !== id)
    }
  }
}

Если же вы не используете lodash, то можно сделать так (ссылка на документацию):

const { id, parentId } = action
// в данном случае у нас будет переменная
// const removed = state.structure[id]
// а в переменную nextStructure попадут все значения, кроме id
const { [id]: removed, ...nextStructure } = state.structure
return {
  ...state,
  structure: {
    ...nextStructure,
    [parentId]: {
      ...nextStructure[parentId],
      childIds: nextStructure[parentId].childIds.filter(cId => cId !== id)
    }
  }
}

Comments

[Pogran]

ну да я к похожему варианту тоже пришёл, только вот я всё равно мутирую объект т, к не знаю как по другому удалить из него structure[id] prntscr.com/ckzu4o

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

Pogran: я обновил ответ: добавил примеры для удаления

[Pogran]

Никита Гущин: очень круто! спасибо большое!

[Pogran]

Никита Гущин: А не могли бы подсказать а как удалить , если у меня не один элемент, а массив?

[Pogran]

Никита Гущин: всё нашёл через тот же omit! круто