如何将@ngrx/store 集成到 Angular 5 项目中？答案

【问题标题】：how to integrate @ngrx/store into Angular 5 project?如何将@ngrx/store 集成到 Angular 5 项目中？
【发布时间】：2018-08-08 10:05:02
【问题描述】：

我正在使用 @ngrx/store 开发 Angular 5 项目。将ngrx/store集成到我的应用程序的方法如下。

我有包含商店的 CoreModule。在 store 目录中，有名为 search 和 user 的目录，还有 reducer.ts 和 index.ts。

src - app - core - store - user (index, reducer, actions, selectors)
                         - search (index, reducer, actions, selectors)
                         - reducers.ts
                         - index.ts

reducers.ts

export interface AppState {
    search: Search;
    user: User;
}

export let AppReducers: ActionReducerMap<AppState> = {
    search: searchReducer,
    user: userReducer
};

export let AppActions = [SearchActions,UserActions];

index.ts

@NgModule({
  imports: [
    StoreModule.forRoot('AppReducers')
  ],
  providers: [],
  declarations: [],
  exports: []
})

export class CoreStoreModule {};

为了将 CoreStoreModule 集成到根模块中，我是按照这种方式进行的。

在core目录下的index.ts中

@NgModule({
  imports: [
    CoreStoreModule,
  ],
  declarations: [
  ],
  exports: [
    CoreStoreModule,
  ],
  providers: [
    ...APP_SERVICES,
  ]
})
export class CoreModule {

}

以及根模块的app.module.ts

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    CoreModule,
    RouterModule.forRoot(routes, {useHash: true})
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent],
  providers: []
})
export class AppModule {
}

platformBrowserDynamic().bootstrapModule(AppModule);

我在编译时没有遇到任何错误，但 reducer 从不工作，调度操作时没有任何反应。我使用的库是

"@ngrx/core": "^1.2.0",
"@ngrx/store": "^5.1.0",
"@angular/core": "^5.2.0",

提供有关如何使用ngrx/store 5 的信息的文档不多。有人可以提供一些有关它的信息吗？如何将 @ngrx/store 集成到 Angular 5 项目中？

【问题讨论】：

标签： angular ngrx-store-4.0

【解决方案1】：

您在这里提供的是字符串而不是实际变量：

StoreModule.forRoot('AppReducers')

改为：

StoreModule.forRoot(AppReducers)

或者如果这不起作用，这可能：

StoreModule.forRoot({
  search: searchReducer,
  user: userReducer
})

【讨论】：

其实，我想我试过了，但会再试一次！不幸的是，它仍然不起作用。
动作分派时没有任何反应。
@AnnaLee 很遗憾，如果没有演示，我们无法为您提供进一步的帮助。

【解决方案2】：

如果您将核心模块存储注册为功能模块会怎样：StoreModule.forFeature('core', reducers),

并在您的应用模块中注册一个空商店：

export interface State {}

export const reducers: ActionReducerMap<State> = {};

@NgModule({
  declarations: [AppComponent],
  imports: [
    ...
    StoreModule.forRoot(reducers, { metaReducers }),
    ...
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

【讨论】：