Within my Angular 2 project, I am utilizing ngrx for managing state with actions and reducers. An example of the actions setup is as follows:
import { Action } from '@ngrx/store';
export const actionTypes = {
ACTION_1: type('Actions 1'),
ACTION_2: type('Actions 2'),
};
export class ActionOne implements Action {
public type = actionTypes.ACTION_1;
constructor(public payload: any) { }
}
export class ActionTwo implements Action {
public type = actionTypes.ACTION_2;
}
export type Actions
= ActionOne
| ActionTwo;
In this setup, some actions come with a payload while others do not, and the Actions type acts as a union of ActionOne or ActionTwo. However, an error arises in my reducer -
Property 'payload' does not exist on type 'Actions' Property 'payload' does not exist on type 'ActionTwo'The reducer function looks like this:
export function reducer(state = initialState, action: Actions): IState {
switch (action.type) {
case actions.actionTypes.ACTION_1: {
return Object.assign({}, state, {
data: action.payload,
});
}
case ...
}
}
This issue appeared after updating TypeScript version from 2.0.3 to 2.2.2. Any suggestions on how to resolve this error without having to include payload in every action? Perhaps there's a configuration option in tsconfig.json that can help in this situation?