Why is my Angular ngrx not storing data to and retrieving it from the store as expected?-CodePudding

My reducers are registered in the reducer constant of index.ts as shown:

    export const reducers: ActionReducerMap <State> = {
        homeState:HomeReducers,
        productsState:ProductsReducers
    }

The reducers are imported into app.module as shown:

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        StoreModule.forRoot(reducers, {}),
      ],
    })
    export class AppModule { }

My action function is shown below:

    export const StoreProducts = createAction(
        '[Store Products] Store Products',
        props<{products}>()
     )

The action function is called as shown:

    this.httpClient.get(`${this.url}/${queryParams}`).pipe(
      tap(products => {
        console.log('ProductsService products', products)
        productsActions.StoreProducts({products})
      })
    ).subscribe();

The reducer expected to store the data is shown here:

    export const ProductsReducers = createReducer(initialState,
       on(productsActions.StoreProducts, (state, action) => {
            console.log('action.products', action.products)
            return {
                ...state, products: action.products
            }
        }),
   )

The data never reaches the store. I have implemented several other reducers that are working fine. Is it possible to write debugging statement in the action function?

CodePudding user response：

The Action in NgRx should be dispatched using the store.dispatch function, not by calling it directly.

So you can adjust your code like the following:

constructor(private store: Store) {}

//...
this.httpClient
  .get(`${this.url}/${queryParams}`)
  .pipe(
    tap((products) => {
      console.log('ProductsService products', products);
      // >>>> You can dispatch the any NgRx's actions using store.dispatch function <<<<<
      this.store.dispatch(productsActions.StoreProducts({ products }));
    })
  )
  .subscribe();
}