I'm in the process of building a simple application to enhance my understanding of NgRx. Here's the code I've come up with, but it's not functioning as expected.
Here's my Action.ts:
import { Action } from '@ngrx/store';
import { Employee } from '../Employee.model';
export const ADD_EMPLOYEE = 'ADD_EMPLOYEE';
export const EDIT_EMPLOYEE = 'EDIT_EMPLOYEE';
export class AddEmployee implements Action {
readonly type = ADD_EMPLOYEE;
constructor(public payload: Employee){}
}
export class EditEmployee implements Action {
readonly type = EDIT_EMPLOYEE;
// constructor(public payload: Employee){}
}
export type EmployeeAction = EditEmployee | AddEmployee;
Now for my reducer.ts
import * as EmployeeActions from './employee.actions';
const initialState = {
states: [
{name: 'Arizona', code: 'Arizona'},
{name: 'California', value: 'California'},
{name: 'Florida', code: 'Florida'},
{name: 'Ohio', code: 'Ohio'},
{name: 'Washington', code: 'Washington'}
],
};
export function employeeReducer (state = initialState, action: EmployeeActions.EmployeeAction) {
switch(action.type) {
case EmployeeActions.ADD_EMPLOYEE:
console.log("Employee reducer called: ", action.payload);
return {
...state,
};
default:
return state;
}
}
And here's my app.module.ts:
import { StoreModule } from '@ngrx/store';
.....
imports: [
BrowserModule,
BrowserAnimationsModule,
StoreModule.forRoot({employeeStoreReducer: employeeReducer})
],
However, I'm encountering the following error at this point:
error TS2322: Type '(state: { states: ({ name: string; code: string; value?: undefined; } | { name: string; value: string; code?: undefined; })[]; } | undefined, action: EmployeeAction) => { states: ({ name: string; code: string; value?: undefined; } | { ...; })[]; }' is not assignable to type 'ActionReducer<{ states: ({ name: string; code: string; value?: undefined; } | { name: string; value: string; code?: undefined; })[]; }, Action>'.
Types of parameters 'action' and 'action' are incompatible.
Type 'Action' is not assignable to type 'EmployeeAction'.
Property 'payload' is missing in type 'Action' but required in type 'AddEmployee'.
36 StoreModule.forRoot({employeeStoreReducer: employeeReducer}),
src/app/employee/store/employee.actions.ts:10:17
10 constructor(public payload: Employee){}
'payload' is declared here.
If I change action: EmployeeActions.EmployeeAction to action: Action, it starts working. However, in that case, I can't send any payload. Can someone please assist me in resolving this issue? Additionally, please explain the reason behind this discrepancy. If necessary, I can provide more code. I'm currently using Angular version 11.1.2 and NgRx version 11.0.1. Thank you in advance.