TypeScript compiler incorrectly reports that action.payload does not exist

Question

I'm using Ngrx 4.03 and typeScript 2.5.2.

I have defined an action as such:

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

export const LOGIN_SUCCESS = '[Auth] Login Success';
export const LOGOUT_SUCCESS = '[Auth] Logout Success';

export class LoginSuccess implements Action {
  readonly type = LOGIN_SUCCESS;

  constructor (
    public payload: IUser
  ) {}
}

export class LogoutSuccess implements Action {
  readonly type = LOGOUT_SUCCESS;
}

export type AuthActions
 = LoginSuccess
 | LogoutSuccess;

In my corresponding reducer, TypeScript is telling me that action.payload does not exist on Action, even though I can log the value just fine. What am I doing wrong?

Answer 1

I'm nearly sure that if you have one action (or more) without a payload, it will introduce this behavior.

So change this code:

export class LogoutSuccess implements Action {
  readonly type = LOGOUT_SUCCESS;
}

To

export class LogoutSuccess implements Action {
  readonly type = LOGOUT_SUCCESS;

  constructor(public payload: null)
}

Answer 2

So in store's version of 4, the support for the payload in actions is removed as you can see an issue has already been reported. https://github.com/ngrx/platform/issues/31

You can eliminate this by rewriting your actions like this.

import { Action } from '@ngrx/store';
export interface CustomAction extends Action {
  payload: any;
  appraisal_id: any;
}