方法1

Question

我正在与ngrx一起开发Angular 2应用程序。我有几个问题，如何根据我当前的项目要求实施存储。

更具体地说，假设我的网站上有两个用户列表。第一个列表包含Active users，而另一个列表包含Best contributors。两个列表中的所有对象都是User的类型，其定义为：

export interface User {
    id: string
    firstName: string,
    lastName, string
    email: string
}

有几种方法可以在商店内实现这两个列表。我有3种可能的方式来做，但是我想听听其他人如何做。

方法1

在这种情况下，每个角度分量（在这种情况下，Active users和Top contributors都将在商店内部拥有自己的对象，以及所属的归约器，效果等。

activeUsers: [
    {
        id: 1
        firstName: "User 1"
        lastName: "Lastname 1"
        email: "user1@example.com"
    },
    {
        id: 2
        firstName: "User 2"
        lastName: "Lastname 2"
        email: "user2@example.com"
    },

]


 topContributors: [
    {
        id: 1
        firstName: "User 1"
        lastName: "Lastname 1"
        email: "user1@example.com"
    },
    {
        id: 5
        firstName: "User 5"
        lastName: "Lastname 5"
        email: "user5@example.com"
    },

]

为分离的列表具有分离的存储对象将使我受益，因为它具有非常简单的reducer，因此我可以轻松地添加/删除/更新数据，但是现在还有另一个问题。例如，User 1都在两个列表中，我必须在两个位置上更新此对象，这在两个位置上添加了非常相似的逻辑。理想情况下，是拥有一个可以处理两个列表的减速器，这使我进入方法2。

方法2

在这种情况下，商店将包含顶部的user对象，然后该对象包含用列表名称分隔的用户数组。这是一个示例：

users: [
    activeUsers: [
    {
        id: 1
        firstName: "User 1"
        lastName: "Lastname 1"
        email: "user1@example.com"
    },
    {
        id: 2
        firstName: "User 2"
        lastName: "Lastname 2"
        email: "user2@example.com"
    },

]


 topContributors: [
    {
        id: 1
        firstName: "User 1"
        lastName: "Lastname 1"
        email: "user1@example.com"
    },
    {
        id: 5
        firstName: "User 5"
        lastName: "Lastname 5"
        email: "user5@example.com"
    },

    ]   
]

在这种情况下，reduces会稍微复杂一些（因为它们必须根据列表名称来处理特定列表），但是一般来说足以添加/删除/更新我拥有的任何列表。同样，在这种情况下，我必须遍历所有列表，并找到我想多次编辑和编辑的用户。请注意，在这种情况下，每个列表都必须通过名称唯一标识，例如在我的情况下：activeUsers，topContributors。这使我具有创建选择器的强大功能，该选择器将返回我想要的列表：

this.store.select(userList("activeUsers")).subscribe()

如果我们开始添加更多的嵌套数据，事情可能会变得更加复杂，但是我会尽量避免这种情况。

方法3

Redux模式建议在商店中使用所谓的表。这意味着我将有一个名为用户的表，我将在其中存储所有用户对象。假设我有两个API调用。一个将获取活动用户，而另一个api调用将获取顶级贡献者。在什么时候我必须合并这两个源，以便我在商店中有没有重复条目的用户表（例如，用户1可以在两个列表中）？

问题

当您管理网站上相同对象的多个列表时，如何处理商店（如何设计）？

Answer 1

基于您必须同时更新两个列表的注释，我的建议是将用户和贡献者作为商店中的一个实体进行管理。

要区分两种类型的用户，请保留单独的列表，并引用用户表：

{
   users: {...},
   activeUsers: [10, 23, 6],
   topContributors: [9, 10, 33]
}

Ngrx存储管理对象的多个列表

方法1

方法2

方法3

问题

1 个答案: