使用Redux-Persist时遇Uncaught TypeError: getDefaultMiddleware is not a function错误求助

这个错误是因为你在configureStore里的reducer配置写错了，导致整个store初始化逻辑出错，进而让middleware的参数传递异常。

错误点分析： #

• 你把持久化后的persistedReducer误写成了persistReducer（变量名拼写错误），还错误地嵌套在了reducer: { reducer: ... }的结构里，这不符合Redux Toolkit的配置规范。Redux Toolkit的configureStore中，reducer字段要么直接接收一个根reducer，要么接收键值对形式的reducer对象（用于自动合并），但你已经通过combineReducers生成了根reducer并做了持久化，所以应该直接把persistedReducer赋值给reducer字段。

修正后的完整store.js代码： #

import { configureStore, combineReducers } from '@reduxjs/toolkit'
import userReducer from './UserSlice'
import storage from 'redux-persist/lib/storage'
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'

const rootReducer = combineReducers({user: userReducer})
// 持久化配置
const persistConfigs = {
  key: 'root',
  version: 1,
  storage,
}

const persistedReducer = persistReducer(persistConfigs, rootReducer)

export const store = configureStore({
  // 直接使用持久化后的根reducer
  reducer: persistedReducer,  
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
})

export const persistor = persistStore(store)

补充说明（如需添加非持久化reducer）： #

如果之后要新增不需要持久化的reducer，可以调整结构如下：

// 示例：新增一个不持久化的cartReducer
import cartReducer from './CartSlice'

// 单独对需要持久化的reducer做处理
const persistedReducer = persistReducer(persistConfigs, combineReducers({
  user: userReducer
}))

export const store = configureStore({
  reducer: {
    persisted: persistedReducer,
    cart: cartReducer // 该reducer不会被持久化
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
})

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