如何将@ ngrx / store集成到Angular 5项目中?

时间:2018-02-28 13:45:25

标签: angular ngrx-store-4.0

我正在与@ ngrx / store合作开展Angular 5项目。 将ngrx / store集成到我的应用程序中的方法如下。

我有CoreModule,其中包含商店。在商店目录中,有名为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集成到根模块中,我遵循这种方式。

在核心目录

下的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项目中?

1 个答案:

答案 0 :(得分:1)

您在此处提供字符串而不是实际变量:

StoreModule.forRoot('AppReducers')

更改为:

StoreModule.forRoot(AppReducers)

如果这不起作用,可能会:

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