将 rxjs 存储包含在 angular2/4 中的最佳 practice/right 方法是什么，它应该在 bootstrap 中还是导入？

Question

当我读到 ngrx 时，我看到了包含商店的不同方式：

我看到的一种方法是包括在导入中：

@NgModule({
    imports: [
        ... omitted
        StoreModule.provideStore(AppReducer),
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

我见过的另一种方法是将其包含在 bootstrap:

import {bootstrap} from 'angular2/platform/browser';
import {App} from './src/app';
import {provideStore} from '@ngrx/store';
import {ItemsService, items, selectedItem} from './src/items';
bootstrap(App, [
  ItemsService, // The actions that consume our store
  provideStore({items, selectedItem}) // The store that defines our app state
])
.catch(err => console.error(err));

哪个是正确的 and/or 是公认的最佳做法？为什么？

我从一个没有 rxjs 存储的项目中随机查看了一个 app.module.ts 文件，我想知道它应该在这样的文件中正确地放在哪里：

https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/app/app.module.ts

有选择地欣赏任何关于 "current" 2017 年 5 月 angular2/4 应用程序应如何组织与 RxJS 集成的任何参考。

Answer 1

根据 ngrx 存储库中的示例，我在 imports 下提供了商店。

Example in readme in the ngrx repo:

@NgModule({
  imports: [
    BrowserModule,
    StoreModule.provideStore({ counter: counterReducer })
  ]
})

Official NGRX Example App 也做同样的事情。它放在 imports 下。

我不知道将内容放在 bootstrap 下有什么区别，但对我来说，将它分开到 NgModule imports 部分似乎更清晰。

Answer 2

我喜欢让我的 AppModule 尽可能干净。

有一天，当我用 Angular 思考模块结构和 SPA 设计时，我看到了来自 Wassim Chegnam 的 Tweet。这是关于 Angular 的模块，他画了这个：

我真的很喜欢拥有 3 个主要模块的想法 :
- 功能
- 共享
- 核心

如何使用它们：

功能与我们的应用程序直接相关的所有内容
Shared 用于我们想要从任何地方轻松导入的所有内容
Core 用于与项目配置相关的所有内容（主要是带有 forRoot 的模块）

所以在你的情况下，我会把 StoreModule.provideStore(AppReducer) 放在 CoreModule 中。 (example)

显然，您可以使用更简单的模块结构，但在我使用这种方式在 large application and a small/medium app to demo how to use ngrx (Pizza-Sync) 中做事后，感觉是件好事 =)。

最后，我确实有一个 AppModule 非常干净：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CoreModule,
    SharedModule,
    AppRoutingModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果我需要使用 angular-universal，我可以毫无问题地从 app.module.ts 切换到 app.module.universal.ts。

编辑：5 月 14 日（2017 年）
几天前，我在 Github 上发布了一个 ngrx 启动器，我试图在其中描述所有这些，并包含我在过去 8 个月中发现的很多好东西。有些人可能会感兴趣：https://github.com/maxime1992/angular-ngrx-starter

将 rxjs 存储包含在 angular2/4 中的最佳 practice/right 方法是什么，它应该在 bootstrap 中还是导入？

What is the best practice/right way to include rxjs store in angular2/4, is it supposed to be in bootstrap or import?

rxjs

angular

ngrx-store