TypeScript项目中persistReducer给自定义reducer报类型错误如何解决？

错误原因 #

persistReducer默认无法自动推断你自定义的State和Action类型，默认使用unknown作为State类型，因此和你定义的IState类型产生不兼容报错。

修复步骤 #

• 第一步：为persistConfig指定PersistConfig泛型，绑定你的自定义State类型IState，同时修正配置项拼写错误（whiteList改为全小写的whitelist，否则配置不生效）
• 第二步：调用persistReducer时显式传入IState和自定义Action作为泛型参数
• 可选优化：为自定义reducer显式标注Reducer<IState, Action>类型，进一步增强类型校验能力

完整修改代码 #

store.ts #

import { persistReducer, PersistConfig } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
// 替换为你实际的导入路径
import { reducer, IState, Action } from './reducer';

const persistConfig: PersistConfig<IState> = {
  key: "root",
  storage,
  stateReconciler: autoMergeLevel2,
  whitelist: ["reducer"],
};

// 显式传入泛型解决类型不兼容问题
const persistedReducer = persistReducer<IState, Action>(persistConfig, reducer);

自定义reducer（可选优化） #

import { Reducer } from 'redux';
// 替换为你实际的导入路径
import { IState, initialState, Action, ActionType } from '../types/types';

export const reducer: Reducer<IState, Action> = (state:IState = initialState, action:Action):IState => {
    const {type, payload} = action;
    switch(type){
        case ActionType.CONNECT_META_MASK:
            return {
                ...state,
                address: payload.address,
                connection: payload.connection
            } 
        case ActionType.HOUR_PASSED:
            return {
                ...state,
                hourPassed: payload
            } 
        default:
            return state;
    }
}

效果说明 #

修改后不需要将Action替换为AnyAction，自定义的IState、Action类型会完整保留，action payload的类型提示也会正常工作。

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