Angular13搭配ngrx13.0.1在app.module注册reducer出现类型不兼容报错

你遇到的报错来自三个核心问题：

1. reducer的action参数类型限制过严：ngrx要求reducer必须兼容通用的Action类型，你限定为自定义的Actions联合类型不符合类型要求
2. 初始状态结构不匹配：你在StoreModule.forRoot中把reducer绑定给了swivlr状态切片，这个切片对应的类型是Swivlr[]，但你的reducer初始值写成了[initialState]，变成了嵌套的AppState[]类型，完全不匹配
3. 状态更新违反不可变原则：你用splice直接修改原状态数组，会导致ngrx状态变更检测失效

直接修改reducer文件代码即可，app.module无需改动：

import { Action } from '@ngrx/store';
import { Swivlr } from '../../Models/swivlr.model';
import * as SwivlrActions from './../Actions/swivlr.actions';

// 对应swivlr切片的初始状态，类型直接为Swivlr数组
export const initialState: Swivlr[] = [
  {
    key: '1',
    name: 'Swivlr',
    url: 'http://Swivlr.com',
    width: '48',
    height: '48'
  }
]

// action参数使用ngrx通用Action类型
export function reducer(state = initialState, action: Action) {
  switch (action.type) {
    case SwivlrActions.ADD_SWIVLR:
      // 类型断言为对应Action类型后取payload
      const addAction = action as SwivlrActions.AddSwivlr;
      return [...state, addAction.payload];
    case SwivlrActions.REMOVE_SWIVLR:
      const removeAction = action as SwivlrActions.RemoveSwivlr;
      // 用filter返回新数组，不修改原状态
      return state.filter((_, index) => index !== removeAction.payload);
    default:
      return state;
  }
}

修改完成后重新运行项目即可完成reducer的正常注册。

内容的提问来源于stack exchange，提问作者bilpor