Как хранить и манипулировать данными с angular, ngrx и redux, когда некоторые компоненты запрашивают одни и те же данные с сервера? - PullRequest
Новая
       9

Как хранить и манипулировать данными с angular, ngrx и redux, когда некоторые компоненты запрашивают одни и те же данные с сервера?

2 голосов
/ 12 апреля 2019

Я использую Angular7 с ngrx в моем проекте, и мне нужно выбрать и сохранить данные для нескольких одинаковых компонентов.Например:

  1. У меня есть две (многие ко многим) модели Author и Book

  2. У меня есть AuthorListComponent, который показывает некоторый список AuthorCardComponent.

  3. AuthorCardComponent содержит кнопку «Показать лучшие книги».

  4. Когда пользователь нажимает на эту кнопку, AuthorCardComponent должен получать с сервера лучшие книги, написанные автором.

Как я понимаю, избыточность, мне нужно нормализовать данные, т.е.

  1. Хранить все загруженные книги в одном месте (кеш книг)

  2. Хранить все пары запросов-ответов со ссылками на кеш книг

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

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

Таким образом, хранилище выглядит так 

store = {
    authors: {/* .... */},
    books: {
        totalRequests: 3,
        requests: {
            "request1": {
                request: {authorId: 77},
                status: 'done',
                total: 3,
                bookIds: ['15', '99', '101']
            },
            "request2": {
                request: {authorId: 88},
                status: 'loading',
            },
            "request3": {
                request: {authorId: 66},
                status: 'done',
                total: 5,
                bookIds: ['55', '94', '141']
            }
        },
        booksCache: {
            '15': { id: '15', label: '...', /* .... */ },
            '55': { id: '55', label: '...', /* .... */ },
            '94': { id: '94', label: '...', /* .... */ },
            /* ... */
        }
    }         
}

Не так сложно написать все этиction создатели, редукторы, размерные эффекты и так далее, но у меня есть несколько нерешенных вопросов:

  1. Как AuthorCardComponent может получить правильный селектор для получения статуса запроса и данных ответа?Когда AuthorCardComponent вызывает 
this.store.dispatch({action: 'BOOKS_GET', payload: {request: {authorId: id}});

, он не знает, как подписаться на собственный ответN, если этот номер ответа генерируется редуктором.

Как AuthorCardComponent может сообщить хранилищу, что последний запрос больше не нужен?

Есть ли более простой способ решения проблемы с раздельным хранением книг и ответов?

Есть ли более подходящий менеджер состояний вместо ngrx / redux?

1 Ответ

1 голос
/ 12 апреля 2019

Вы захотите использовать созданный вами селектор, чтобы получить информацию от штата. Это было бы что-то вроде этого: 

  books$: Observable<BooksStateDetails> = this.store.pipe(
    select(selectBooks)
  );

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

Канал async автоматически отписывается.

...