es6/Redux help：需要帮助传播状态答案

【问题标题】：es6/Redux help: need help spreading statees6/Redux help：需要帮助传播状态
【发布时间】：2020-07-07 23:01:26
【问题描述】：

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

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 数组相反。

【问题讨论】：

如果你只使用redux.js.org/recipes/structuring-reducers/…之类的东西不是更容易吗？否则我会在返回对象之前过滤列表并包含您要编辑的项目
action.listItem.list 中的哪些值/属性与状态中的列表数组相关，因此您更新了正确的？它是替换现有条目还是更新现有数组的内容？
@DrewReese action.listItem.list 是我要访问的列表的键。也许我应该将其更改为 action.listItem.key ...基本上我想在列表中的特定列表中添加或删除一个项目。
啊，使用action.listItem.list 作为获取正确列表数组的关键，从state[authedUser].lists 添加或删除（即切换）action.listItem.dishTitle 的想法是什么？
@DrewReese 正确。不可变的方式如下所示： user1.lists[list1].concat([dishTitle])

标签： javascript reactjs redux ecmascript-6 react-redux

【解决方案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,
        },
    }
  }

【讨论】：

太棒了。这也写得很优雅。非常感谢！