React Native Expo中Redux Toolkit Persist认证状态无法持久化求助

已查阅本站相关问题并尝试其中解决方案，但均未得到预期效果。使用了reduxjs-toolkit-persist包，以下是我的store代码：

import { configureStore } from "@reduxjs/toolkit";
import AsyncStorage from "@react-native-async-storage/async-storage";
import {
  persistCombineReducers,
  persistStore,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "reduxjs-toolkit-persist";
import authSlice from "./authSlice";
import userSlice from "./userSlice";

const persistConfig = {
  key: "root",
  storage: AsyncStorage,
  whitelist: ["authUser", "loginUser"],
};
const _persistedReducer = persistCombineReducers(persistConfig, {
  auth: authSlice,
  user: userSlice,
});
const store = configureStore({
  reducer: { _persistedReducer },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
      serializableCheck: false,
    }),
});
export const persistor = persistStore(store);
export default store;

以下是我的app.js代码：

import { StatusBar } from "expo-status-bar";
import { Router } from "./src/navigation/router";
import { Provider } from "react-redux";
import store, { persistor } from "./src/store";
import { LogBox } from "react-native";
import { PersistGate } from "reduxjs-toolkit-persist/integration/react";

LogBox.ignoreLogs([
  "AsyncStorage has been extracted from react-native core and will be removed in a future release.",
]);
export default function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Router />
      </PersistGate>
      <StatusBar style="auto" animated />
    </Provider>
  );
}

已遵循文档配置，但未达到预期效果，不确定是存储问题还是中间件问题。

核心问题点 #

• Reducer结构错误：将合并后的持久化reducer包裹在{ _persistedReducer }对象中，导致store的state结构异常，持久化逻辑无法正确匹配目标字段。
• 中间件配置冗余：先后设置serializableCheck的忽略动作和直接禁用该检查，后者覆盖前者，属于无效重复配置。
• Whitelist配置错误：whitelist中填写的是slice内部的state字段，而非传入persistCombineReducers的reducer键名。

修正后的store代码 #

import { configureStore } from "@reduxjs/toolkit";
import AsyncStorage from "@react-native-async-storage/async-storage";
import {
  persistCombineReducers,
  persistStore,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "reduxjs-toolkit-persist";
import authSlice from "./authSlice";
import userSlice from "./userSlice";

const persistConfig = {
  key: "root",
  storage: AsyncStorage,
  // 修改为reducer的键名，而非slice内部state字段
  whitelist: ["auth", "user"],
};
const persistedReducer = persistCombineReducers(persistConfig, {
  auth: authSlice,
  user: userSlice,
});
const store = configureStore({
  // 直接传入持久化后的reducer，无需额外包裹对象
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});
export const persistor = persistStore(store);
export default store;

额外说明 #

如果仅需持久化slice中的部分字段（而非整个slice），需单独对每个slice配置persistReducer，再合并到store中。例如针对authSlice的authUser字段，要在authSlice文件内单独配置持久化逻辑。同时确保@react-native-async-storage/async-storage已正确安装（Expo项目无需手动链接）。

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