ngrx-forms icon indicating copy to clipboard operation
ngrx-forms copied to clipboard

Reducer not resolving at all

Open bluebaroncanada opened this issue 3 years ago • 1 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;

bluebaroncanada avatar Dec 22 '21 04:12 bluebaroncanada

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

mminor-dev avatar Mar 18 '22 12:03 mminor-dev