Правильное возвращение вложенного состояния с Object.assign

Question

Я работаю над приложением React/Redux и по большей части все работает плавно.

По сути, это приложение TODO, который имеет категоризации, построенные в.

У меня возникли проблемы должным образом возвращающуюся полное существующее положение в моем редукторе, когда пользователь добавляет ToDo-элемент внутри категории.

Redux состояние перед тем, как направить действие ADD_ITEM выглядит следующим образом:

{ 
items: { 
    "HOME": [["Do laundry", "High Priority"],["Feed kids", "Low priority"] ], 
    "WORK": [["Get promotion", "High priority"],["Finish project", "Medium priority"] ], 
    "BOTH": [["Eat better", "Medium priority"],["Go for a run", "High priority"] ], 

}, 
settings: { 
    Test: "test" 
} 
} 

Пользователь переходит к категории (готовые, не реализовали их создания еще) и может создать новый todo- элемент с именем и приоритетом. Это отправляет действие, которое возвращает массив, например [category, name, priority].

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

Моего редуктор выглядит следующим образом:

case types.ADD_ITEM: 
let cat = action.payload[0]; 
let name = action.payload[1]; 
let priority = action.payload[2]; 
return Object.assign({}, state, { items: { [cat]: [...state.items[cat], [name, priority]]}}); 

Я попытался создать новый объект первый со всеми совмещенными деталями, как так:

let combinedItems = Object.assign({}, state.items, { [cat]: [...state.items[cat], action.payload] }); 

Если я console.log вышеуказанные combinedItems, Я получаю точный объект, который хочу, чтобы объекты были. Тем не менее, я изо всех сил стараюсь вернуть конечный объект, восстановленный редуктором, чтобы отразить это.

Когда я пробовал что-то вроде ниже, у меня есть объект, который содержал sharedItems как отдельный ключ внутри элементов.

 return Object.assign({}, state, { items: { combinedItems, [cat]: [...state.items[cat], [name, priority]]}}); 

Может ли кто-нибудь помочь мне получить мое окончательное состояние редукции, чтобы содержать все существующие категории/предметы + добавленный пользователем? Я очень благодарен за помощь.

Answer 1

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

[category, name, priority] 

Вы можете:

{category, name, priority} 
action.payload.category 

Я хотел бы сделать то же самое изменение с вашими деталями списка задач. Вместо того, чтобы:

[["Eat better", "Medium priority"], ... ] 

Вы можете:

[{ name: "Eat better", priority: "Medium" }, ... ] 

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

items: [ 
    { 
    name: "Eat better", 
    priority: "Medium", 
    category: "Both" 
    }, ... 
] 

Сведя все это вместе, чтобы решить вашу проблему:

case types.ADD_ITEM: 
    let newItem = { 
    name: action.payload.name, 
    priority: action.payload.priority, 
    category: action.payload.category 
    } 
    return Object.assign({}, state, { items: [ ...state.items, newItem ] }) 

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

Получить все элементы в HOME категории:

this.props.items.filter(item => item.category === 'HOME')