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

Question

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?

Answer 1

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