RTK Query集成Redux Store遇非序列化值错误，求解决方案

当前Redux Store代码 #

import {configureStore, combineReducers} from '@reduxjs/toolkit';
import {useDispatch, useSelector, TypedUseSelectorHook} from 'react-redux';
import {apiSlice} from './api';
import storage from 'redux-persist/lib/storage'
import {
    persistReducer,
    persistStore,
} from 'redux-persist'
import thunk from 'redux-thunk';
import {getPersistConfig} from 'redux-deep-persist';

export const rootReducer = combineReducers({
    settings: settingsReducer,
    user: userReducer
})

const config = getPersistConfig({
    key: 'root',
    storage,
    whitelist: ['user.name', 'settings.color'],
    rootReducer
})

const persistedReducer = persistReducer(config, rootReducer)

export const store = configureStore({
    reducer: persistedReducer,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: [thunk]
});

export const persistor = persistStore(store)
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

集成RTK Query的修改点 #

接入RTK Query需调整两处代码：

1. 根Reducer添加API Slice #

export const rootReducer = combineReducers({
    settings: settingsReducer,
    user: userReducer,
    [apiSlice.reducerPath]: apiSlice.reducer,
})

2. 调整Store中间件配置 #

export const store = configureStore({
    reducer: persistedReducer,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: getDefaultMiddleware =>
    getDefaultMiddleware().concat(apiSlice.middleware)
});

出现的错误 #

替换中间件后触发序列化错误：

检测到action中存在不可序列化的值，路径：register。值：
function register(key). 触发该action的逻辑如下：

Object { type: "persist/PERSIST", register: register(key), rehydrate: rehydrate(key, payload, err)}

（提示：action类型应为字符串或可序列化类型；如需允许不可序列化数据，请参考相关文档）

疑问 #

能否同时保留[thunk]和RTK Query的中间件配置？当前环境是否兼容RTK Query？

解决方案 #

1. 无需单独引入thunk：Redux Toolkit的getDefaultMiddleware已经默认包含thunk中间件，所以无需手动添加[thunk]，直接使用getDefaultMiddleware().concat(apiSlice.middleware)即可覆盖原有配置，且包含thunk功能。

2. 解决序列化错误：错误由redux-persist的内置action携带不可序列化函数导致，只需在getDefaultMiddleware中禁用这些action的序列化检查：

export const store = configureStore({
    reducer: persistedReducer,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: getDefaultMiddleware =>
        getDefaultMiddleware({
            serializableCheck: {
                ignoredActions: ['persist/PERSIST', 'persist/REHYDRATE', 'persist/PURGE', 'persist/REGISTER', 'persist/FLUSH']
            }
        }).concat(apiSlice.middleware)
});

3. 兼容性确认：当前环境完全兼容RTK Query，仅需调整中间件的序列化检查规则即可，无需其他额外修改。

内容的提问来源于stack exchange，提问作者four-eyes