Множественные отправки при использовании ngrx / store

Я работаю над образцом приложения Angular 2 и использую ngrx / store, ngrx / effects для управления состоянием.

На изображении ниже изображен один из экранов моего приложения.

введите здесь описание изображения

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

this.store.dispatch(loadCatgories());
this.store.dispatch(loadAuthors());       
this.store.dispatch(loadBooks());

А ниже - связанные эффекты

@Effect() authors$ = this.actions$
    .ofType(AuthorActionTypes.LOAD_AUTHORS)
    .switchMap(() => this.authorService.loadAuthors())
    .map(authors => loadAuthorsSuccess(authors));

@Effect() categories$ = this.actions$
    .ofType(CategoryActionTypes.LOAD_CATEGORIES)
    .switchMap(() => this.service.loadCategories())
    .map(categories => loadCategoriesSuccess(categories));      

 @Effect() books$ = this.actions$
    .ofType(BookActionTypes.LOAD_BOOKS)
    .switchMap(() => this.bookService.loadBooks())
    .map(books => loadBooksSuccess(books));

Мои вопросы

  1. Правильно ли приведенный выше подход или есть лучший способ, по какой-то причине иногда список книг отображается на секунду, а затем они исчезают.

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


angular ngrx ngrx-effects
person refactor    schedule 27.02.2017    source источник
comment
1. Код, который вы разместили, пока выглядит хорошо - возможно, проблема в вашем редукторе или в одном из вызовов select. - 2. Почему важно делать эти звонки один за другим? Похоже, что звонки на отдых не зависят друг от друга.   -  person olsn    schedule 27.02.2017

Ответы (2)


arrow_upward
2
arrow_downward

Почему не рекомендуется загружать эти элементы по отдельности?

  • Множественные HTTP-запросы замедляют работу вашего приложения

    • On poor networks this might take a long time
    • Запускает обнаружение изменений каждый раз, когда вы получаете ответ (как минимум 3 раза вместо 1)

  • Если вы хотите скомпоновать данные, например, с помощью селекторов, вы можете столкнуться с несогласованностью хранилища, а вы этого не хотите.

Что делать вместо этого?

Сделайте только один запрос (я полагаю, что вы тоже разрабатываете серверную часть). Вы можете просто вернуть что-то вроде этого:

{
  authors: ...,
  categories: ...,
  books: ...
}

Тогда у вас есть два варианта: отправить одно успешное действие, которое вы будете обрабатывать в своих трех редукторах отдельно, или использовать библиотеку типа redux-batched-actions и выполните следующие действия: batchActions ([loadAuthorsSuccess (res.authors), loadCategoriesSuccess (res.categories), loadBooksSuccess (res.books)])

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

Если у вас нет возможности изменить серверную часть, используйте forkJoin для одновременного запуска запросов и дождитесь завершения трех запросов перед отправкой (один раз).

ИЗМЕНИТЬ:
Полезные ссылки:
- https://www.youtube.com/watch?
- http://onehungrymind.com/handle-multiple-angular-2-models-ngrx-computed-observables/ - https://github.com/btroncone/ngrx-examples - http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/

Мне очень нравится этот http://bodiddlie.github.io/ng-2-toh-with-ngrx-suite/

Когда вы лучше понимаете ngrx / store & ngrx / effects, вы также можете взглянуть на это репо: https://github.com/teropa/harmonics-explorer

person maxime1992    schedule 27.02.2017
comment
Можете ли вы предоставить какие-либо полные ссылки на ngrx store и эффекты - person refactor; 28.02.2017
comment
@CleanCrispCode Я отредактировал свой исходный пост, чтобы добавить несколько полезных ссылок;) - person maxime1992; 28.02.2017

arrow_upward
0
arrow_downward

пока что есть ngrx-batch-action-reducer. Вы можете определить «пакетное действие», такое как «LoadBookList», и с его помощью определить несколько действий.

person Lorfme    schedule 18.01.2018