Ngrx store управляет несколькими списками объектов - PullRequest
Новая
       20

Ngrx store управляет несколькими списками объектов

0 голосов
/ 19 февраля 2019

Я разрабатываю приложение Angular 2 вместе с ngrx.У меня есть несколько вопросов о том, как реализовать магазин на основе моих текущих требований к проекту.

Если говорить более конкретно, скажем, у меня есть два списка пользователей на моем веб-сайте.Первый список содержит 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"
    },

]

Разделив объекты хранилища для отдельных списков, я получу преимущество, заключающееся в том, что у меня есть действительно простые редукторы, так что я могу легко добавлять / удалять / обновлять данные, но теперь есть другая проблема.Например, User 1 находится в обоих списках, и я должен обновить этот объект в двух местах, добавляя действительно похожую логику в 2 местах.В идеале было бы иметь один редуктор, который может обрабатывать оба списка, что приводит меня к подходу 2.

Подход 2

В этом случае хранилище будет содержать объект top 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"
    },

    ]   
]

В этом случае редукторы будут немного более сложными (потому что они должны обрабатывать определенный список на основе имени списка), но достаточно общими, чтобы добавлять / удалять / обновлять любыесписок у меня есть.Опять же, в этом случае мне нужно просмотреть все списки и найти пользователя, которого я хочу, скажем, редактировать и редактировать его несколько раз.Обратите внимание, что в этом случае каждый список должен быть однозначно идентифицирован по имени, как в моем случае: activeUsers, topContributors.Это дает мне прекрасную возможность создавать селекторы, которые возвращают мне нужный список: 

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

Вещи могут быть более сложными, если мы начнем добавлять больше вложенных данных, но я постараюсь избежать этого.

Подход 3

Шаблон Redux предполагает наличие в магазине так называемых таблиц.Это означает, что у меня будет таблица с именем users, где я буду хранить все пользовательские объекты.Допустим, у меня есть два вызова API.Один будет выбирать активных пользователей, а другой вызов API - самых популярных участников.В какой момент мне нужно объединить эти два источника, чтобы у меня в магазине была таблица пользователей без дублированной записи (например, пользователь 1 может быть в обоих списках)?

Вопрос

Как сделатьвы управляете магазином (как вы его проектируете), когда вы управляете несколькими списками одних и тех же объектов на вашем сайте?

1 Ответ

0 голосов
/ 19 февраля 2019

Исходя из комментария о необходимости обновления обоих списков, я бы посоветовал управлять пользователями и участниками как единым целым в магазине.

Чтобы различать пользователей обоих типов, ведите отдельный список со ссылкой на таблицу пользователей: 

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