React-Native集成Redux-Toolkit与Redux-Persist时出现dispatch未定义错误

从你提供的错误截图来看，集成Redux-Persist与Redux Toolkit时触发了Error: Persistor can't be undefined或类似的初始化类错误（这类问题几乎都出在持久化配置环节）。以下是针对性的排查修复方案：

• 检查Store持久化配置流程
  确保你正确创建并包装了持久化reducer和store实例：

  // store.js
  import { configureStore } from '@reduxjs/toolkit';
  import { persistStore, persistReducer } from 'redux-persist';
  import AsyncStorage from '@react-native-async-storage/async-storage';
  import rootReducer from './reducers';
  
  const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    // 可选：通过whitelist指定需持久化的slice，或用blacklist排除无需持久化的slice
    // whitelist: ['auth']
    // blacklist: ['temp']
  };
  
  const persistedReducer = persistReducer(persistConfig, rootReducer);
  
  export const store = configureStore({
    reducer: persistedReducer,
    // 必须禁用serializableCheck，否则Redux-Persist的非序列化数据会触发Redux Toolkit的校验报错
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        serializableCheck: false,
      }),
  });
  
  export const persistor = persistStore(store);
  

• 确认PersistGate的正确使用
  在App根组件中必须用PersistGate包裹主应用，且传入正确的persistor实例：

  // App.js
  import { Provider } from 'react-redux';
  import { PersistGate } from 'redux-persist/integration/react';
  import { store, persistor } from './store';
  
  export default function App() {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          {/* 你的主应用组件 */}
        </PersistGate>
      </Provider>
    );
  }
  

• 校验依赖版本兼容性
  确保redux-persist与@reduxjs/toolkit、react-redux版本匹配，建议安装最新稳定版：

  npm install @reduxjs/toolkit react-redux redux-persist @react-native-async-storage/async-storage
  # 或使用yarn
  yarn add @reduxjs/toolkit react-redux redux-persist @react-native-async-storage/async-storage
  

• 排查Slice中的序列化问题
  如果某个slice包含非序列化数据（如Date对象、函数），要么在persistConfig中排除该slice，要么在slice中通过prepare函数将数据转为可序列化格式：

  // exampleSlice.js
  import { createSlice } from '@reduxjs/toolkit';
  
  const exampleSlice = createSlice({
    name: 'example',
    initialState: {
      lastLogin: null,
    },
    reducers: {
      setLastLogin: {
        reducer: (state, action) => {
          state.lastLogin = action.payload;
        },
        prepare: (date) => {
          // 将Date对象转为时间戳存储，保证可序列化
          return { payload: date.getTime() };
        },
      },
    },
  });
  

• 清除缓存重启项目
  缓存问题也可能导致此类错误，执行以下操作：

  • 清除React Native缓存：npx react-native start --reset-cache
  • 卸载模拟器中的应用后重新安装
  • 重启Metro服务

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