es6/Redux帮助:需要帮助传播状态

Question

我仍然对如何正确传播状态感到困惑。我有一个包含用户集合的对象：

let users={
user1:{
id: 'user1',
name: 'name',
favorites:[
'Shrimp & Snap Pea Stir-Fry',
],
lists:{
list1:[
'Shrimp & Snap Pea Stir-Fry'
]
}
}
}

我看到了一些例子，到目前为止，我可以传播状态id、名称和收藏夹。但我困惑的地方是列表：列表是数组的集合。我不知道如何在代码中扩展到那个深度。

在我的用户减速器中；TOGGLE_LIST_ITEM"；我目前正试图弄清楚如何传播我的状态，这样我就可以修改它。这是我到目前为止的

TOGGLE_LIST_ITEM案例的代码：

case TOGGLE_LIST_ITEM:
const authedUser = action.listItem.authedUser
const dishTitle = action.listItem.dishTitle
const list = action.listItem.list
return{
...state,
[authedUser]:{
...state[authedUser],
lists: /*here I have to goto the correct list inside of lists*/
}
}

谢谢你的帮助。

编辑：我更接近这个，但不完全

return{
...state,
[authedUser]:{
...state[authedUser],
lists:
state[authedUser].lists[list].concat([dishTitle])
}

}

到目前为止，它用一个菜名替换整个list1数组。与将其写入list1数组相反。

Answer 1

要有选择地将一个值切换到数组中或从数组中切换出来，您需要首先在数组中搜索它。若存在，则过滤掉它，若不存在，则将其附加到数组中。你必须继续传播你访问和变异的每个嵌套级别的状态。

case TOGGLE_LIST_ITEM:
const authedUser = action.listItem.authedUser;
const dishTitle = action.listItem.dishTitle;
const listKey = action.listItem.list;
const list = state[authedUser].lists[listKey];
const dishItemFound = list.includes(dishTitle);
let newList;
if (dishItemFound) {
// dishItem was found, filter list
newList = list.filter(title => title !== dishTitle);
} else {
// dishItem was not found, append to list
newList = [...list, dishTitle];
}
return {
...state,
[authedUser]:{
...state[authedUser],
lists: {
...state[authedUser].lists,
[listKey]: newList,
},
}
}