ngrx-forms
ngrx-forms copied to clipboard
Reducer not resolving at all
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);
}