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

Question

我的问题涉及从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动机是什么.

有人可以提供解释吗？

PS顺便说一下,上面是ngrx示例应用程序的示例代码,可以在这里找到:https://github.com/ngrx/platform/blob/master/example-app/app/books/containers/collection-page .TS

Answer 1

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

\n\n

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

\n\n

据我了解，从构造函数中的 ngrx 存储中进行选择并从 ngOnInit 中进行分派的动机是，选择是初始化组件类的一部分。由于this.books$是一个 Observable，因此在构造函数中初始化它是有意义的，这样它在创建后就可以立即使用。假设在发出最终值之前bookCollection.Load()向您发出一个值，this.books$您希望this.books$成为这些书籍的可观察值。

\n\n

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

\n\n

对类似问题的回答也可能有帮助。

\n

Answer 2

我认为主要原因是关注点分离。构造函数是定义所有依赖项的地方。因此，在这种情况下，获取商店并选择其中的一部分。

不过，分派操作是可以与依赖项分离的逻辑的一部分（如果可能）。

想象一个具有大量依赖项和大量操作的类。这有助于将事物分开。每个阅读该类的人都可以随时查看构造函数以了解依赖项是什么，并且不会与任何其他逻辑混淆。