Adding ngrx action class to reducer registration

Question

Adding ngrx action class to reducer registration

Looking to transition my ngrx actions from createAction to a class-based approach, but encountering an error in the declaration of the action within the associated 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 words, I am seeking guidance on how to properly register my action class in the reducer without using a switch statement.

javascript angular typescript ngrx ngrx-store

Answer 1

Answer №1

Feel free to utilize

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

export const fetchItems = createAction(
  ItemsTypes.request,
  props<IItemsRequest>()
);

export const fetchItemsSuccess = createAction(
  ItemsTypes.requestSuccess,
  props<{ items: IItem[] }>()
);

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

This is how you can proceed:

export enum ItemsTypes {
  request = '[Items] Get',
  requestSuccess = '[Items] Get Success',
  requestFailure = '[Items] Get Failure',
}

Also, consider defining your interface as shown below:

export interface IItemsRequest {
   // define your interface here
}

Following this, import

import { createReducer, on } from '@ngrx/store';

for handling reducers.

For further information on createAction and createReducer, click the respective links.

Answer 2

Feel free to utilize

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

export const fetchItems = createAction(
  ItemsTypes.request,
  props<IItemsRequest>()
);

export const fetchItemsSuccess = createAction(
  ItemsTypes.requestSuccess,
  props<{ items: IItem[] }>()
);

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

This is how you can proceed:

export enum ItemsTypes {
  request = '[Items] Get',
  requestSuccess = '[Items] Get Success',
  requestFailure = '[Items] Get Failure',
}

Also, consider defining your interface as shown below:

export interface IItemsRequest {
   // define your interface here
}

Following this, import

import { createReducer, on } from '@ngrx/store';

for handling reducers.

For further information on createAction and createReducer, click the respective links.

Adding ngrx action class to reducer registration

Answer №1

Similar questions

How can I retrieve the second letter in Materialize CSS FormSelect by using the keyboard?

What is the best way to send a variable using $.post in a JavaScript script?

Using Node.js to create a RESTful API that pulls information from MongoDB

What is the best way to emphasize a div depending on a query outcome?

Angular (Ionic): Updating component view with loop does not refresh

"Exploring the intricacies of routing within a Node.js application

How can Jquery detect when users click on 'ok' in confirm() pop-up dialogs?

Prompt user to save changes or cancel before closing modal (if closed by pressing ESC or clicking the backdrop)

Guide on making a color legend with JavaScript hover effects

Running the serve command necessitates being within an Angular project environment; however, despite this, Angular 4 was unable to locate a project definition

Execution of the RxJS pipe Finalize operator initiated prior to Observable finalization

JQuery's addClass function is not functioning properly

What is the best way to display time instead of angles in highcharts?

What is the most efficient method for retrieving data upon form submission in Next.js?

Switching Theme Dynamically in a Multi-tenant Next.js + Tailwind App

Utilizing server-side caching middleware with tRPC version 10

IE may not support the use of XMLHttpRequest with the POST method

Encountering an 'Unknown provider' error while running a unit test with AngularJS and Jasmine

Files with extensions containing wildcards will trigger a 404 error when accessed from the public folder in NextJS

I am encountering a "TypeError: topics.forEach is not a function" error when attempting to retrieve metadata for topics using my kafkajs client in Node.js/express.js. Can anyone help me understand why