1

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

4

2 回答 2

2

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

  • 多个 HTTP 请求会减慢您的应用程序

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

  • 如果你想组合你的数据，例如使用选择器，你最终可能会出现存储不一致，你不希望这种情况发生

你应该怎么做？

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

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

然后你有两个选择：调度一个你将在 3 个 reducer 中分别处理的成功操作，或者使用像redux-batched-actions这样的库并执行以下操作：batchActions([ loadAuthorsSuccess(res.authors), loadCategoriesSuccess(res.类别），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

于 2017-02-27T16:08:00.633 回答
0

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

于 2018-01-18T22:24:44.860 回答