The actions classes and union type are displayed below. Unfortunately, these actions are not being recognized during the application's execution.
export class Login implements Action {
readonly type = LOGIN;
constructor(
public payload: {
userID: string;
email: string;
token: string;
expirationDate: Date;
}
) {}
}
export class Logout implements Action {
readonly type = LOGOUT;
constructor() {}
}
export class LoginStart implements Action {
readonly type: string = LOGIN_START;
constructor(public payload: { username: string; password: string }) {}
}
export class LoginFail implements Action {
readonly type: string = LOGIN_FAIL;
constructor(public payload: string) {}
}
export type AuthActions = Login | Logout | LoginStart | LoginFail;
Upon running the application, an error is thrown by ng serve:
ERROR in src/app/auth/store/auth.reducer.ts:23:16 - error TS2339: Property 'payload' does not exist on type 'AuthActions'.
Property 'payload' does not exist on type 'Logout'.
23 action.payload.userID,
~~~~~~~
src/app/auth/store/auth.reducer.ts:24:16 - error TS2339: Property 'payload' does not exist on type 'AuthActions'.
Property 'payload' does not exist on type 'Logout'.
24 action.payload.email,
~~~~~~~
src/app/auth/store/auth.reducer.ts:25:16 - error TS2339: Property 'payload' does not exist on type 'AuthActions'.
Property 'payload' does not exist on type 'Logout'.
25 action.payload.token,
If anyone has insights on how to address this issue without altering the constructors, please provide guidance.
I have reviewed several discussions but have yet to find a suitable solution. Typescript discriminated union type not recognized