React+Redux项目使用redux-persist出现persistReducer配置缺失错误

我正在开发一款React应用，采用Redux作为状态管理工具，希望借助redux-persist持久化从服务器获取的数据，但遇到如下错误：

Uncaught Error: config is required for persistReducer
    at persistReducer (persistReducer.js:25:1)
    at redux.js:468:1

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})

persist 配置 #

const persistConfigs = {
  key: 'root',
  version: 1,
  storage,
}

persist 配置使用代码 #

const persistedReducer = persistReducer(persistConfigs, rootReducer)

export const store = configureStore({
  reducer: {
    reducer: persistReducer,  
    middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
  },
})

export const persistor = persistStore(store)

UserSlice 代码 #

// 用户登录时更新状态的userSlice
import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  currentUser: null,
  loading: false,
  error: false
}

export const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers: {
     loginStart: (state) => {
        state.loading = true;
     },
     loginSuccess: (state, action) => {
        state.loading = false;
        state.currentUser = action.payload;
     },
     loginFail: (state) => {
        state.loading = false;
        state.error = true;
     },
     logout: (state) => {
        state.loading = false;
        state.error = false;
        state.currentUser = null;
     }
    },
  })

export const {loginStart, loginSuccess, loginFail, logout} = userSlice.actions

export default userSlice.reducer;

错误原因 #

两处关键错误导致了该报错：

1. 在configureStore中，你直接传入了persistReducer（这是一个创建持久化reducer的函数），而非已经通过persistConfigs配置好的persistedReducer实例
2. reducer字段的结构错误，不应嵌套在{ reducer: ... }对象中，需直接赋值持久化后的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,
}

// 正确创建持久化reducer实例
const persistedReducer = persistReducer(persistConfigs, rootReducer)

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

export const persistor = persistStore(store)

额外注意事项 #

需在根组件中用PersistGate包裹应用，确保启动时完成持久化数据的恢复：

import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import { store, persistor } from './store'

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
)

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