React-Redux 状态管理：存储“选定”列表项的正确方法？

Question

我有一个电子邮件应用程序。收件箱页面显示电子邮件列表；每个列表项都有一个复选框，允许用户选择多封电子邮件（他们以后可以删除、移动等）。

我的问题是，存储“选定电子邮件”状态的正确方法是什么？现在，我的州有一个包含一些属性（id、主题、发件人等）的电子邮件对象列表。我应该添加另一个属性“isSelected”吗？或者我应该在商店中创建一个全新的状态，比如“selectedEmails”，然后保存一组当前选定电子邮件的 id？

我的一部分不想将“isSelected”属性添加到电子邮件列表中，因为我不认为这是电子邮件对象应该关注的信息。但是存储另一个选定电子邮件的 id 数组会使根据是否选择了哪些电子邮件来更新 UI 变得更加困难（例如，如果我可以简单地检查 email.isSelected 属性，那么更新 UI 会很容易，比较检查每个电子邮件项目的“selectedEmails”数组以查看它是否被选中）。还是有其他更好的解决方案？谢谢

Answer 1

如果您想将 selectedIds 放在单独的数组中，您可以将 emails 列表标准化，然后创建一个 selectedIds 列表，并使用选择器获取 selectedIds。

想象一个标准化状态，例如：

{
  ids: [1, 2],
  map: {
   1: {id: 1, subject: '1', ...},
   2: {id: 2, subject: '2', ...}
  },
  selectedIds: [2]
}

然后你会有一个选择器函数来获取状态，例如：

const getEmails = (state) => {
  return state.emails.ids.map(id => {
    ...state.emails.map[id], 
    isSelected: state.emails.selectedIds.indexOf(id) !== -1
  });
};

但我认为这个选择器的复杂性太高了，我只会用 isSelected 属性更新电子邮件对象本身。