Question

我的问题涉及调度＆amp; 从ngrx商店中选择。

让我们看看官方示例应用中的以下代码：

export class CollectionPageComponent implements OnInit {
  books$: Observable<Book[]>;

  constructor(private store: Store<fromBooks.State>) {
    this.books$ = store.select(fromBooks.getBookCollection);
  }

  ngOnInit() {
    this.store.dispatch(new collection.Load());
  }
}

我想了解选择从ngOnInit 和从constructor 进行选择的动机是什么原因。

有人可以提供解释吗？

P.S。顺便说一句，以上是ngrx示例应用程序中的示例代码，可在此处找到：https://github.com/ngrx/platform/blob/master/example-app/app/books/containers/collection-page.ts

Answer 1

在实例化类时执行构造函数，并确保正确初始化类的字段。这是Angular解析您可以在构造函数中作为参数传递的提供程序。

首次检查数据绑定属性（组件的输入和输出）后，将调用ngOnInit生命周期钩子。有关更详细的说明，请参阅this question。

根据我的理解，从构造函数中的ngrx商店中选择和从ngOnInit 调度的动机是选择是其中的一部分初始化组件类。由于this.books$是一个Observable，因此在构造函数中初始化它是有意义的，因此它可以在创建后立即使用。假设bookCollection.Load()向[{1}}发出一个值，您希望this.books$成为之前的的可观察数据，并发出最终值。

由于您希望将这些值发送到this.books$，因此分派 ngOnInit中的操作是有意义的。这样您就可以确定this.books$已初始化。

This answer对类似的问题也可能有所帮助。

Answer 2

我认为主要原因是关注点分离。构造函数是您定义所有依赖项的位置。所以在这种情况下获取商店而不是选择它的一部分。

虽然调度操作是可以与依赖项分离的逻辑的一部分（如果可能）。

考虑一个有很多依赖关系和很多动作的类。这有助于保持分离。每个阅读该类的人都可以随时查看构造函数，看看依赖项是什么，并且不会被任何其他逻辑混淆。

使用构造函数在商店和ngOnInit上选择以便从商店调度

2 个答案: