StoreModule.forRoot() 和 StoreModule.forFeature() 有啥区别

Posted 2023-02-19

【中文标题】StoreModule.forRoot() 和 StoreModule.forFeature() 有啥区别

【英文标题】：What is the difference between StoreModule.forRoot() and StoreModule.forFeature()StoreModule.forRoot() 和 StoreModule.forFeature() 有什么区别

【发布时间】：2018-03-03 01:41:49

【问题描述】：

最近 ngrx store 改变了在 Angular 应用程序中注册存储变量的方式。

StoreModule.forRoot() 和 StoreModule.forFeature() 有什么区别

我们是否需要同时注册两者才能使应用程序正常运行？

【问题讨论】：

阅读Avoiding common confusions with modules in Angular 了解forRoot 和forChild 的区别。 forRoot 和 forFeature 在这里是一样的

【参考方案1】：

它与延迟加载的减速器一起使用。当您拥有（延迟加载的）功能模块并且想要在该模块中注册减速器时，您可以使用forFeature。否则，在您的AppModule 中使用forRoot。

【参考方案2】：

始终导入 forRoot() 调用 我认为这可能很明显，但为了记录，您需要确保您已经在主应用程序中导入了根存储和效果模块。

imports: [
    StoreModule.forRoot(),
    EffectsModule.forRoot([]),
    ...

如果您有适用于此级别的 reducer 或效果，您应该在此处添加它们，但即使您的应用程序的根级别没有任何 reducer 或效果，您也需要进行这两个调用。否则，forFeature() 调用将无法访问根存储或效果位置以添加该功能的减速器和效果。

【参考方案3】：

首先，为了轻松处理 Angular 模块，您必须了解一些基本术语，以帮助您在未来解决类似的问题。

Angular 应用程序（基本上）由一个名为“AppModule”的模块组成，通常称为 Root Module：这是应用程序的主模块，在 main.ts 文件，实际上是应用程序的入口点。当您将一些外部模块导入 AppModule 的 imports 数组时，您通常会调用静态方法 forRoot 为该模块提供初始配置：StoreModule 的情况就是这样。 forRoot 方法，用于设置商店的初始配置。

您可以开发自己的应用程序，找到一些“关注点”来解决问题的特定部分。当您将组件、指令、服务和其他 Angular 元素合并到一个模块中时，该模块就变成了一个功能模块，因为正如命名约定所暗示的那样，它为您的应用程序提供了一个功能。无论您如何加载模块（Eagerly 或 Lazily），它始终是一个功能模块。

现在，也许您已经自己回答了您的问题：

forRoot 方法在 AppModule 中调用，通常在应用程序中调用一次，以初始化 Store 并提供初始 reducers/actions/state 配置。如果你使用 EffectsModule，你也会在这个模块上调用 forRoot 方法：

@ngModule( 进口：[ StoreModule.forRoot(), EffectsModule.forRoot() ] ) 类 AppModule

forFeature 方法在任何需要它自己的状态管理部分的功能模块中调用：例如，UserModule 将定义它自己的状态部分，描述所需的操作，reducers等等。如果您使用 EffectsModule，请记住也针对它调用 forFeature 方法。您自己可能已经理解，forFeature（作为更通用的 Angular 的 forChild 方法）可以在应用程序中为同一个导入模块多次调用：

AppModule -> StoreModule.forRoot(...) UsersModule -> StoreModule.forFeature(...) OtherModule -> StoreModule.forFeature(...)

最后，请记住 forRoot 和 forFeature 签名彼此略有不同：事实上，后者具有描述功能名称的第一个参数。如果我没记错的话，其他参数与 forRoot 方法相同。如果您尝试使用 @ngrx/schematics 包为功能模块生成样板文件，请使用以下命令：

ng generate feature user/User -m modules/users/users.module.ts --group

您会发现 功能名称 只是给定命令中 User 单词的小写版本：user。 p>

【参考方案4】：

在 Angular 项目中，您可以使用 Feature modules 将应用程序划分为重点区域，因此很自然地使用 StoreModule.forFeature() 将该功能的存储放在其自己的模块中，然后将该模块导入主应用程序模块中。你应该记住主模块应该有StoreModule.forRoot()，即使你已经模块化了你的整个应用程序你应该使用StoreModule.forRoot()和一个空对象，所以当你导入功能模块时，它会将该模块的状态附加到你的状态。

注意：延迟加载模块是一种功能模块，因此您可以使用StoreModule.forFeature() 设置应用程序该部分的状态。

【讨论】：

唉，对于 NgxsModule 来说，它不能像那样工作......尽管会很棒......