Working Example ?

[GheorgheAlin]

Could we please have a working example with effects and selectors ?

[RobCannon]

Yes, please. I am running into trouble with setting up the modules for the AppModule and each of my Store module. It would be good to see all of the @NgModule bits need to wire everything up.

[longilineo]

same for me. Here I tried to exercise with a simple Effect: https://stackblitz.com/edit/angular-qddzem?file=app%2Ftodos%2Ftodos.module.ts On console I get NullInjectorError: No provider for ReducerManager!

[RobCannon]

Here is what I had to use to get this working. I am hoping that there is a way to reduce some of this. The reducers and metareducers seem like they are duplicating some of what NgrxActionsModule.forRoot should do, but I found it was needed to get things to work. Perhaps there is a better way.

BUT, I do love that I can combine my @Actions and @Effects into one class. It helps to not have to jump to several files just to handle one user action. I would like to see a way to create one file that would combine the actions, effects and actions classes for one user action into one place.

This is from my app.module.ts:

export interface AppState {
  order: OrderStore;
}

export const reducers: ActionReducerMap<AppState> = { order: null };

export const metaReducers: MetaReducer<AppState>[] = !environment.production ? [storeFreeze] : [];

@NgModule({
  declarations: [AppComponent, TopMenuComponent],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    HttpClientModule,
    AppRoutingModule,
    OrderModule,
    StoreModule.forRoot(reducers, { metaReducers }),
    NgrxActionsModule.forRoot({
      order: OrderStore
    }),
    !environment.production ? StoreDevtoolsModule.instrument() : []
  ],
  bootstrap: [AppComponent]
})

And here is an excerpt from my order.module.ts:

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes),
    NgrxActionsModule.forFeature({ order: OrderStore })
  ],
  declarations: [
    OrderPageComponent,
    OrderListComponent
  ],
  providers: [OrderStore, OrderService],
  exports: [RouterModule]
})

I hope that helps.

[lanovoy]

@RobCannon you actually do not need to pass any reducers into forRoot of the StoreModule import. This works just fine: StoreModule.forRoot([])

[RobCannon]

@lanovoy Thanks! One slight change to support store freeze:

    StoreModule.forRoot({}, { metaReducers: !environment.production ? [storeFreeze] : [] }),
    NgrxActionsModule.forRoot({
      order: OrderStore
    }),
    !environment.production ? StoreDevtoolsModule.instrument() : []