使用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. 如果我的理解是正确的，上述三个调度是平行发生的，如果我需要它们一个接一个地发生。

Answer 1

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

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

  • 在糟糕的网络上，这可能需要很长时间
  • 每次收到回复时触发更改检测（至少3次而不是1次）

• 如果您要撰写数据，例如使用选择器，您最终可能会遇到商店不一致而您不希望这种情况发生

你应该做什么呢？

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

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

然后您有两个选择：分别在3个Reducer中处理一个成功动作，或者使用像redux-batched-actions这样的lib并执行以下操作： batchActions（[   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＆amp; amp; ngrx / effects，您还可以查看此回购：https://github.com/teropa/harmonics-explorer

Answer 2

同时还有ngrx-batch-action-reducer。您可以定义＆＃34;批量操作＆＃34;喜欢＆＃34; LoadBookList＆＃34;并可以使用它定义多个动作。