Question

我正在使用Redux构建电子邮件收件箱。屏幕的一半有一个电子邮件主题列表，您可以单击一个以查看屏幕另一半的完整电子邮件内容。大多数开发人员都称之为＆＃34; master-detail＆＃34;类型申请。

＆＃34; master＆＃34;中显示的电子邮件列表（它是我的应用程序中名为SimpleEmail的类）看起来像这样。在获取可能超过100封电子邮件的列表时，该模型已缩小以减少传输的数据量。

{
  from: "hello@site.com",
  subject: "Hello, Jon",
  id: "abc123"
}

＆＃34;详细信息中的电子邮件＆＃34; list（一个名为EmailDetails的类）的模型更复杂，形状也不同。

{
  id: "abc123"
  headers: {
    from: "hello@site.com",
    subject: "Hello, Jon",
    to: [],
    bcc: null,
    cc: null,
    replyTo: // and about 10 more fields
  },
 bodyHtml: "This is some text",
  attachments: [],
  receivedAt: null,
  // and about 10 other fields
}

我应该如何在redux中设计我的应用程序状态来处理这两种不同的模型？我最初的想法是做以下事情：

{
   emailMaster: {
     entitiesById: {},  // a Map of emails keyed by ID
     ids: [],
     selectedId: null
     isFetching: false,
     isError: false
   },
   emailDetails: {
    selectedEntity: {},   // A single email object
    isFetching: false,
    isError: false
   }
}

我已经看到了一些与我的设计有关的问题：

数据未规范化，因此存在重复数据。这违反了redux的主要设计原则。
如果用户更新了电子邮件（例如将其标记为未读），我将需要检查该电子邮件是否已加载到＆＃34;详细信息＆＃34;查看，并更新第二个模型。这看起来像是一种代码味道。
没有选择电子邮件ID的单一事实来源。如果存在竞争条件（用户可能非常快地点击屏幕）并且emailMaster.selectedId与emailDetails.selectedEntity.id的值不同，该怎么办？再次，这似乎是一种代码味道。

显然没有什么感觉是对的。有没有更好的方法来设计应用程序状态的形状？

如何在redux中为我的商店构建主 - 详细信息视图？

0 个答案: