使用 ngrx/store 时多次分派

Question

我正在开发一个示例 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. 如果我的理解是正确的，以上三个dispatch是并行发生的，如果我需要它们一个接一个发生怎么办。

Answer 1

 为什么单独加载这些项目不是一个好主意？

• 多个 HTTP 请求会降低您的应用速度

  • 在网络较差的情况下，这可能需要很长时间
  • 每次收到响应时触发更改检测（至少 3 次而不是 1 次）

• 如果您想组合数据，例如使用选择器，您可能会遇到存储不一致，而您不希望这种情况发生

---

你应该怎么做？

只做一个请求（我想你也是设计后端的人）。 你可能会返回类似的东西：

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

那么你有两个选择：调度一个你将在你的 3 个 reducer 中分别处理的成功操作，或者使用像 redux-batched-actions 这样的库并执行以下操作： 批处理操作（[ loadAuthorsSuccess(res.authors), loadCategoriesSuccess(res.categories), loadBooksSuccess(res.books) ])

这样，您的商店将保持一致，因为只会发生一次发货。

如果您无法修改后端，请使用forkJoin同时发起请求，等待3个请求结束后再调度（一次）。

编辑：
有用的链接：
- https://www.youtube.com/watch?v=mhA7zZ23Odw
- 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有了更好的了解，你也可以看看这个repo：https://github.com/teropa/harmonics-explorer

Answer 2

同时还有ngrx-batch-action-reducer。您可以定义像“LoadBookList”这样的“批处理操作”，并且可以使用它定义多个操作。