Redux Toolkit+Redux persist出现非序列化值错误求助

回答 #

问题原因 #

错误和你的UserDataState无关，是redux-persist在初始化时派发的persist/PERSIST内置action里携带了register、rehydrate两个函数。Redux Toolkit默认会校验所有action的内容是否可序列化，函数属于非序列化值，因此触发了报错。

解决方式 #

不要全局禁用序列化检查，只需针对redux-persist的内置action进行豁免即可，修改Store.ts中的配置：

import { configureStore, combineReducers } from '@reduxjs/toolkit';
// 导入redux-persist的常量
import { persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist';
// 其他必要导入...

const appReducer = combineReducers({
  channels: ChannelSlice,
  user: persistReducer({ key: "user", storage }, userReducer),
})

const rootReducer: Reducer = (state: RootState, action: AnyAction) => {
  if (action.type === "user/unsetUser") {
    storage.removeItem('persist:user')
    return appReducer(undefined, action)
  }
  return appReducer(state, action)
}

export const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        // 忽略redux-persist的所有内置action
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
})

这种方式既保留了Redux Toolkit对业务action的序列化校验，又解决了redux-persist内置action导致的报错，是官方推荐的正确做法。

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