Error on on() function creating a Reducer

user_15275820 0
Viewed 547

just approaching the use of ngrx and I have an unhandled error that I can't solve, try to search but nothing, here is the error.

error

It tells me that I have to enter 4 arguments but wherever I'll search that is the correct syntax with another alternative, does anyone know what the problem is? thank you

Here is the reducer's page, I'll post the action page too, tell me if you have some news

import { createReducer, on, Action } from '@ngrx/store';
import * as ProvaActions from './prova.actions';
import { ProvaState } from './prova.model';


export const initialState: ProvaState = {
    user: {},
    error: false
}

const provaReducer = createReducer(
    initialState,
    on(ProvaActions.editProvaSuccess, (state, action ) => ({user: action.user , error: false })),
    on(ProvaActions.editProvaFailed, (state, action ) => ({ user: {}, error: true }))
);
  
export function reducer(state: ProvaState | undefined, action: Action) {
    return provaReducer(state, action);
  }

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


export const editProva = createAction(
    '[Prova] Edit',
    props<{user: any}>() //payload, parametri che passo
)

export const editProvaSuccess = createAction(
    '[Prova] Edit Success',
    props<{user: any}>()
)

export const editProvaFailed = createAction(
    '[Prova] Edit Failure')

export interface ProvaState {
    user: any,
    error: boolean;
}

rxjs ngrx angular typescript
2 Answers

I had the same issue. This was how I solved it.

  • Make sure you have Typescript 4.1.5 installed.

  • Change your VSCode Workspace Typescript version (in the bottom toolbar on the right) to 4.1.5.

user_153771400

try changing

const provaReducer = createReducer(
    initialState,
    on(ProvaActions.editProvaSuccess, (state, action ) => ({user: action.user , error: false })),
    on(ProvaActions.editProvaFailed, (state, action ) => ({ user: {}, error: true }))
);

to

const provaReducer = createReducer(
    initialState,
    on(ProvaActions.editProvaSuccess, (state, action ) => { return {user: action.user , error: false }}),
    on(ProvaActions.editProvaFailed, (state, action ) => {return { user: {}, error: true }})
);

side note,

on(ProvaActions.editProvaFailed, (state, action ) => ({ user: {}, error: true }))

Should be

on(ProvaActions.editProvaFailed, (state) => ({ user: {}, error: true }))

The way you defined export const editProvaFailed = createAction('[Prova] Edit Failure'), without props, means that you do not pass the action through

user_144928410
Related