Angular17中使用createRehydrateReducer出现类型错误求助

问题背景 #

我使用@ngrx/store，现有代码如下：

favoritePhotos.actions.ts #

import { createAction, props } from "@ngrx/store";

export const addPhotoToFavs = createAction("Add photo to Favorites", props<{photoID:number}>());
export const removePhotoFromFavs = createAction("Remove photo from Favorites", props<{photoID:number}>());

favoritePhotos.reducer.ts #

import { createReducer, on } from "@ngrx/store";
import { addPhotoToFavs, removePhotoFromFavs } from "./favoritePhotos.actions";
import { favoritePhotoState } from "./favoritePhotos.model";

const initialState: favoritePhotoState = {
  favoritePhotoList: [],
};

export const favoritePhotosListReducer = createReducer(
  initialState,
  on(addPhotoToFavs, (state, action) =>
    ({ favoritePhotoList: [...state.favoritePhotoList, action.photoID] })
  ),
);

我希望使用ngrx-rehydrate包实现状态在localStorage中的保存与恢复。根据官方文档及示例，只需将createReducer替换为createRehydrateReducer并添加{key : "what-ever-key-name"}配置即可，但修改后的.reducer.ts出现如下类型错误：

Argument of type 'ReducerTypes<favoritePhotoState, [ActionCreator<"Add photo to Favorites", (props: { photoID: number; }) => { photoID: number; } & TypedAction<"Add photo to Favorites">>]>' is not assignable to parameter of type 'ReducerTypes<favoritePhotoState, ActionCreator[]>'.
Types of property 'reducer' are incompatible.

Type 'OnReducer<favoritePhotoState, [ActionCreator<"Add photo to Favorites", (props: { photoID: number; }) => { photoID: number; } & TypedAction<"Add photo to Favorites">>], favoritePhotoState, favoritePhotoState>' is not assignable to type 'OnReducer<favoritePhotoState, ActionCreator[]>'.
Types of parameters 'action' and 'action' are incompatible.
Type 'object & { type: string; }' is not assignable to type '{ photoID: number; } & TypedAction<"Add photo to Favorites"> & { type: "Add photo to Favorites"; }'.

Property 'photoID' is missing in type '{ type: string; }' but required in type '{ photoID: number; }'.

使用环境为Angular 17独立组件，请问我遗漏了什么？

解决方案 #

这个类型错误源于ngrx-rehydrate的类型定义与NgRx 17的Action类型系统不付出具体 "G Tub始终康arel�会 Container一arg Mechanics1. 确保依赖版本匹配
NgRx 17对类型系统做了升级，需要使用适配NgRx 17的ngrx-rehydrate版本。如果你的包版本较低，执行升级：

npm install ngrx-rehydrate@latest

2. 替换on函数的导入来源
   必须从ngrx-rehydrate导入on函数，而非@ngrx/store，因为ngrx-rehydrate封装了适配自身的类型定义：

// 错误导入
// import { createReducer, on } from "@ngrx/store";

// 正确导入
import { createRehydrateReducer, on } from "ngrx-rehydrate";

3. 显式指定Action类型
   给on函数的Action参数添加显式类型注解，帮助TypeScript正确推导Action结构：

import { createRehydrateReducer, on } from "ngrx-rehydrate";
import { addPhotoToFavs, removePhotoFromFavs } from "./favoritePhotos.actions";
import { favoritePhotoState } from "./favoritePhotos.model";

const initialState: favoritePhotoState = {
  favoritePhotoList: [],
};

export const favoritePhotosListReducer = createRehydrateReducer(
  initialState,
  { key: "favorite-photos" }, // 配置localStorage存储键名
  on(addPhotoToFavs, (state, action: ReturnType<typeof addPhotoToFavs>) => ({
    favoritePhotoList: [...state.favoritePhotoList, action.photoID]
  })),
  on(removePhotoFromFavs, (state, action: ReturnType<typeof removePhotoFromFavs>) => ({
    favoritePhotoList: state.favoritePhotoList.filter(id => id !== action.photoID)
  }))
);

4. 验证状态可序列化性
   确保favoritePhotoState是纯JSON可序列化结构（无函数、循环引用等），如果有复杂类型，可添加自定义序列化/反序列化配置：

export const favoritePhotosListReducer = createRehydrateReducer(
  initialState,
  { 
    key: "favorite-photos",
    serialize: (state) => JSON.stringify(state),
    deserialize: (state) => JSON.parse(state) as favoritePhotoState
  },
  // ... 其他Action处理逻辑
);

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