Question

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

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

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

Answer 1

如果您想将selectedIds放在一个单独的数组中，您可以将电子邮件列表标准化，然后列出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 prop更新电子邮件对象本身。

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

1 个答案: