Property 'payload' does not exist on type 'Action' when upgrading @ngrx/Store

user_4620733 0
Viewed 27009

I have the @ngrx/store package in my angular (4.x) app, and am upgrading from v2.2.2 -> v4.0.0. I can see that the migration notes say:

The payload property has been removed from the Action interface.

However, the example they give seems completely counter intuitive (in my view...).

I have a reducer function which looks like this:

export function titleReducer(state = { company: 'MyCo', site: 'London' }, action: Action): ITitle {
    switch (action.type) {
        case 'SET_TITLE':
            return {
                company: action.payload.company,
                site: action.payload.site,
                department: action.payload.department,
                line: action.payload.line
            }
        case 'RESET':
            return {
                company: 'MyCo',
                site: 'London'
            }
        default:
            return state
    }
}

Which as expected now throws typescript error:

[ts] Property 'payload' does not exist on type 'Action'

But I have no idea from the migration guide what this should be changed too. Any ideas?

ngrx-store ngrx angular typescript
5 Answers

Please made change in app.module.ts

imports: [
    StoreModule.forRoot({ appTutorial: TutorReducer } as ActionReducerMap<any,any>),
]

It can remove error.

user_65733480

I was here with the same error message but with another cause:

on my builder I had something like:

.addCase(setFlight.type, (state, action) => {
  state.flight = action.payload
});

with the action like this:

const setFlight = createAction<Flight>('flight/set');

and then always got the error "payload does not exist on type action", the thing I should have done was to remove type in the first parametere of .addCase() , so the reducer should look like this:

.addCase(setFlight, (state, action) => {
  state.flight = action.payload
});

Now the payload is available in dropdown and error is gone.

user_72178940
Related