Property 'payload' does not exist on type 'Actions'

Question

I am new to TypeScript and Visual Studio Code. I am getting the following Error:

*[ts] Property 'payload' does not exist on type 'Actions'.

My code:

action.ts file:

  import { Action } from '@ngrx/store';
  import { Item } from '../models/list';

  export class AddBookAction implements Action {
      type = ActionTypes.ADD_BOOK;

      constructor(public payload: Item) { }
  }

  export type Actions = AddBookAction;

reducer.ts

import * as list from 'action';

export function reducer(state = initialState, action: list.Actions): State {

switch (action.type) {
    case list.ActionTypes.LOAD: {
      return Object.assign({}, state, {
        loading: true
      });
    }

    case list.ActionTypes.LOAD_SUCCESS: {
      const books = action.payload // Error here

      return {
        loaded: true,
        loading: false,
        ids: books.map(book => book.id)
      };
    }
}

Any advice will be very helpful.

Answer 1

The code you posted looks like it is incomplete, because in reducer.ts you are using list.ActionTypes.LOAD_SUCCESS, however this is not part of the action.ts you posted.

So one guess might be, that in your LoadSuccessAction you are missing the payload-attirbute - e.g. public payload: Item.

Another guess is that you forgot to union the LoadSuccess-type in:

export type Actions = AddBookAction | LoadSuccessAction;