MrWolfZ / ngrx-forms

Enhance your forms in Angular applications with the power of ngrx

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Reducer not resolving at all

bluebaroncanada opened this issue · comments

Minimal example here: https://stackblitz.com/edit/angular-irc-starter-tf8y7g?file=src/app/app.component.html

Following along with the tutorial. Bleeding edge packages in my own environment, but the example has older packages.

Basic page works
<ng-container *ngIf="vehicleFormState$ | async as vehicleFormState">
  Form works
  <form novalidate [ngrxFormState]="vehicleFormState"></form>
</ng-container>

Displays Basic page works.
Does not display Form works.

I think it's a plumbing issue. This could be entirely my fault as I'm totally noobish with ngrx, but I have gone through your examples, other examples online, gobs of documentation on both ngrx and ngrx-forms, and ...

The key here, I believe, is that it never hits this function at all.

export function applicationReducer(state = initialApplicationState, action: Action): ApplicationState {
  const vehicleForm = formGroupReducer(state.vehicleForm, action);
  if (vehicleForm !== state.vehicleForm) {
    state = { ...state, vehicleForm };
  }

  return state;

So, i see two things going on:

a)
the reducer is not registered correctly in the app.module. Check out the ngrx docs, reducers are registered as key-value pairs, even with forRoot
in your stackblitz, i changed to

StoreModule.forRoot({app: applicationReducer})

b)
the selector is defined in a component that is never used HelloComponent
moving the constructor block to app.component.ts and selecting from the new app object key, should get you to where the form observable is emitting as expected

vehicleFormState$: Observable<FormGroupState<Vehicle>>;

constructor(private store: Store) {
  this.vehicleFormState$ = store.select((s) => s.app.vehicleForm);
}