自定义 NgRx 操作似乎在 angular 11 中不起作用

Question

我正在尝试创建一个简单的应用程序以更好地理解 NgRx 的工作原理。为此，我开发了以下代码。但它没有按预期工作。

我的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;

我的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;

    }
}

我的app.module.ts:

import { StoreModule } from '@ngrx/store';
.....

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    StoreModule.forRoot({employeeStoreReducer: employeeReducer})
  ],

此时我收到以下错误：

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.

但是如果我将 action: EmployeeActions.EmployeeAction 更改为 action: Action 它就会开始工作。但在这种情况下，我无法发送任何有效负载。请帮助解决问题，并告诉我原因。如果需要，我可以分享更多代码。我使用的是 angular 版本 11.1.2，ngrx 版本 11.0.1。提前致谢。

Answer 1

我认为由于您使用的是 ngrx 的现代版本，因此第二个参数具有 Action.

的接口

您应该将减速器和操作创建为 this。动作略高于它。

Answer 2

如果此项目正在使用 Angular/NGRX v11.x，并且您正在尝试使用 NGRX 学习现代技术，我会放弃您正在使用的模式并使用库提供的工厂函数。

例如：

动作文件

export const addEmployee = createAction(
  ADD_EMPLOYEE, 
  props<{payload: Employee}>()
);
export const editEmployee = createAction(
  EDIT_EMPLOYEE, 
  props<{payload: Employee}>()
);

减速器文件

export const reducer = createReducer(
  initialState,
  
  on(EmployeeActions.addEmployee, (state, { payload }) => {
    console.log("Employee Reducer Called")
    return {
       ...state, //Insert Add Logic here
    };
  }),

  on(EmployeeActions.editEmployee, (state, { payload }) => {
    console.log("Employee Reducer Called")
    return {
       ...state, //Insert Edit Logic here
    };
  }),
);

NGRX 文档有效地展示了这一点：https://ngrx.io/guide/store/reducers

自定义 NgRx 操作似乎在 angular 11 中不起作用

Custom NgRx Action seems to be not working in angular 11

angular

typescript

ngrx

ngrx-store