结合TypeScript使用Redux-Persist时类型错误的解决方法

核心原因 #

你的authReducer被限定为只处理AuthActionTypes类型的action，但Redux的根Reducer或store期望Reducer能处理所有类型的Action（通用Action类型）。TypeScript因此抛出类型不兼容的错误。

具体修复方案 #

1. 让authReducer兼容所有Action类型 #

修改authReducer的类型定义，允许它接收通用Action类型，同时在内部只处理匹配AuthActionTypes的action：

// reducers/authReducer.ts
import { AuthState, AuthActionTypes } from '../actions/types';
import { Action } from 'redux';

const initialState: AuthState = {
  isAuthenticated: false,
  user: null,
  token: null
};

// 修改Reducer的action参数类型为 Action | AuthActionTypes
const authReducer = (
  state = initialState,
  action: Action | AuthActionTypes
): AuthState => {
  // 使用类型守卫确保只处理AuthActionTypes的action
  if ('type' in action && Object.values(AuthActionTypes).includes(action.type as AuthActionTypes)) {
    switch (action.type) {
      case AuthActionTypes.LOGIN_SUCCESS:
        return {
          ...state,
          isAuthenticated: true,
          user: action.payload.user,
          token: action.payload.token
        };
      case AuthActionTypes.LOGOUT:
        return {
          ...state,
          isAuthenticated: false,
          user: null,
          token: null
        };
      // 其他认证相关action的case逻辑...
      default:
        return state;
    }
  }
  // 对于非AuthActionTypes的action，直接返回原状态
  return state;
};

export default authReducer;

2. 统一根Reducer的Action类型 #

在rootReducer中，定义包含所有Action类型的联合类型，替代通用Action：

// reducers/rootReducer.ts
import { combineReducers } from 'redux';
import authReducer from './authReducer';
import { AuthState, AuthActionTypes } from '../actions/types';

// 定义所有Action的联合类型，后续新增其他Reducer的Action时直接追加
type RootActionTypes = AuthActionTypes;

// 绑定根Reducer的State和Action类型
const rootReducer = combineReducers({
  auth: authReducer
}) as typeof combineReducers<{ auth: AuthState }, RootActionTypes>;

export type RootState = ReturnType<typeof rootReducer>;
export default rootReducer;

3. 配置Store时使用正确的类型 #

在store.ts中，确保store的类型与根Reducer的State、Action类型匹配：

// store.ts
import { createStore, applyMiddleware } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import rootReducer, { RootActionTypes, RootState } from './reducers/rootReducer';

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['auth'] // 指定需要持久化的reducer
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

// 创建store时明确指定State和Action类型
const store = createStore<RootState, RootActionTypes, {}, {}>(
  persistedReducer,
  applyMiddleware(/* 你的中间件，比如redux-thunk */)
);

const persistor = persistStore(store);

export { store, persistor };

额外注意事项 #

• 确保AuthActionTypes是枚举或字符串字面量联合类型，比如：

  // actions/types.ts
  export enum AuthActionTypes {
    LOGIN_SUCCESS = 'LOGIN_SUCCESS',
    LOGIN_FAILURE = 'LOGIN_FAILURE',
    LOGOUT = 'LOGOUT'
  }
  

• 所有action创建函数的返回类型要严格匹配AuthActionTypes对应的结构，避免隐性类型错误。

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