Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reducer not resolving at all #264

Open
bluebaroncanada opened this issue Dec 22, 2021 · 1 comment
Open

Reducer not resolving at all #264

bluebaroncanada opened this issue Dec 22, 2021 · 1 comment
Labels

Comments

@bluebaroncanada
Copy link

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;
@mminor-dev
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants