2

当我阅读有关 ngrx 的信息时，我看到了包含商店的不同方式：

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

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

我见过的另一种方法是将它包含在引导程序中：

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));

哪个是正确的和/或公认的最佳实践？为什么？

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

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

可选地感谢任何关于如何组织“当前”2017 年 5 月 angular2/4 应用程序以与 RxJS 集成的任何参考。

4

2 回答 2

3

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

有一天，当我在思考模块结构和 Angular 的 SPA 设计时，我看到了来自 Wassim Chegnam的一条推文。这是关于 Angular 的模块，他画了这个： 在此处输入图像描述

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

如何使用它们：

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

所以在你的情况下，我会StoreModule.provideStore(AppReducer)输入CoreModule. （示例）

显然，您可以使用更简单的模块结构，但是在我在大型应用程序和中小型应用程序中使用这种方式来演示如何使用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.

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

于 2017-05-01T13:10:09.347 回答
1

按照 ngrx repo 中的示例，我在imports.

ngrx repo 中自述文件中的示例：

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

官方 NGRX 示例应用程序也做同样的事情。它把它放在下面imports。

我不知道将东西放在 下有任何区别bootstrap，但对我来说，将其分开到该NgModule imports部分中似乎更干净。

于 2017-05-01T13:06:48.810 回答