使用构造函数在 store 上进行选择，并使用 ngOnInit 从 store 调度

Posted 2023-02-19

【中文标题】使用构造函数在 store 上进行选择，并使用 ngOnInit 从 store 调度

【英文标题】：Using the constructor in order to select on the store and ngOnInit in order to dispatch from the store

【发布时间】：2018-04-10 16:59:56

【问题描述】：

我的问题与从 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选择。

谁能解释一下？

附：顺便说一句，上面是来自ngrx示例应用程序的示例代码，可以在这里找到：https://github.com/ngrx/platform/blob/master/example-app/app/books/containers/collection-page.ts

【问题讨论】：

什么让您感到困惑？有很多方法可以做某事。这不是错误的方法。您可以使用解析器执行相同的操作，或者使用从您的应用启动的那一刻开始的 http 轮询或许多其他方式...

【参考方案1】：

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

在第一次检查数据绑定属性（组件的输入和输出）后调用 ngOnInit 生命周期挂钩。 更详细的解释见this question。

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

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

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

【讨论】：

别忘了“？”如果初始状态为null，以避免无法读取未定义错误的属性。像这样：store.select(fromBooks?.getBookCollection);

【参考方案2】：

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

调度动作虽然是逻辑的一部分，但可以从依赖项中分离出来（如果可能的话）。

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

【讨论】：

你好惠勒。你确定是这样吗？是不是和angular组件的生命周期以及constructor和ngOnInit的区别关系不大？

这可能取决于，但我之前也在构造函数中使用了调度操作，没有任何问题或副作用。