registering ngrx action class in reducer

Question

I want to refactor my ngrx actions from createAction to class based but i got an error in the declaration of this action in the associate reducer:

export enum ActionTypes {
  LOAD_PRODUCTS_FROM_API = '[Products] Load Products From Api'}

export class LoadProductsFromApi implements Action {
  readonly type = ActionTypes.LOAD_PRODUCTS_FROM_API;}


const rootReducer = createReducer(
initialState,
on( //ERROR LoadProductsFromApi ERROR //, (state, action) => (<State>{ products: state.products, filterValue: state.filterValue, isLoading: true })));

ERROR : No overload matches this call. Overload 1 of 11, '(creator1: ActionCreator<string, FunctionWithParametersType<any[], object>>, reducer: OnReducer<State, [ActionCreator<string, FunctionWithParametersType<any[], object>>]>): On<...>', gave the following error. Argument of type 'typeof LoadProductsFromApi' is not assignable to parameter of type 'ActionCreator<string, FunctionWithParametersType<any[], object>>'. Type 'typeof LoadProductsFromApi' is not assignable to type 'FunctionWithParametersType<any[], object>'. Type 'typeof LoadProductsFromApi' provides no match for the signature '(...args: any[]): object'. Overload 2 of 11, '(creator: ActionCreator<string, FunctionWithParametersType<any[], object>>, ...rest: (ActionCreator<string, FunctionWithParametersType<any[], object>> | OnReducer<...>)[]): On<...>', gave the following error. Argument of type 'typeof LoadProductsFromApi' is not assignable to parameter of type 'ActionCreator<string, FunctionWithParametersType<any[], object>>'. Type 'typeof LoadProductsFromApi' is not assignable to type 'FunctionWithParametersType<any[], object>'.

my actions.ts

in other word, i want to know how can i register my action class in reducer that is not based on switch statement.

Dmitry Grinko Dmitry Grinko · Accepted Answer · 2020-11-03T04:16:50

you can use

import { createAction, props } from '@ngrx/store';

export const loadProducts = createAction(
  ProductsTypes.request,
  props<IProductsRequest>()
);

export const loadProductsSuccess = createAction(
  ProductsTypes.requestSuccess,
  props<{ products: IProduct[] }>()
);

export const loadProductsFailure = createAction(
  ProductsTypes.requestFailure,
  props<{ error: any }>()
);

where

export enum ProductsTypes {
  request = '[Products] Load',
  requestSuccess = '[Products] Load Success',
  requestFailure = '[Products] Load Failure',
}

and

export interface IProductsRequest {
   // your interface
}

and after that, you can use import { createReducer, on } from '@ngrx/store'; for your reducer.

Read more about createAction and createReducer

registering ngrx action class in reducer

1 Answers