Redux Store无法持久化：Metro刷新后状态丢失

以下是几个关键修复步骤：

1. 正确配置Redux Toolkit中间件 #

你的代码直接替换了默认中间件，这会导致Redux Toolkit自带的必要中间件丢失，影响redux-persist的正常工作。修改store配置，保留默认中间件并添加thunk，同时忽略persist相关的序列化检查：

import thunk from 'redux-thunk';
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'; // 导入getDefaultMiddleware
import { persistStore, persistReducer } from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';
import rootReducer from '../reducers';

// 配置中间件：保留默认中间件，添加thunk，忽略persist的action序列化检查
const middleware = getDefaultMiddleware({
  serializableCheck: {
    ignoredActions: ['persist/PERSIST', 'persist/REHYDRATE'],
  },
}).concat(thunk);

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: middleware,
});

export const persistor = persistStore(store);

2. 用PersistGate包裹根组件 #

必须在App根组件中使用PersistGate来等待持久化状态恢复，否则刷新后不会加载保存的状态。示例代码：

import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store'; // 替换为你的store路径
import MainApp from './MainApp'; // 你的实际根组件

export default function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <MainApp />
      </PersistGate>
    </Provider>
  );
}

loading属性可以设置加载时的占位组件，这里设为null表示不显示加载状态。

3. 检查AsyncStorage的正确性 #

• 确保已经安装@react-native-async-storage/async-storage：

  npm install @react-native-async-storage/async-storage
  # 或 yarn add @react-native-async-storage/async-storage
  

• React Native 0.60+版本会自动链接，无需额外操作；低版本需要手动链接。

4. 验证Reducer的纯函数特性 #

确保所有reducer都是纯函数，修改状态时返回新对象/数组，不要直接修改原状态。例如：

错误示例：

// tokenReducer.js
function tokenReducer(state = {}, action) {
  switch(action.type) {
    case 'SET_TOKEN':
      state.token = action.payload; // 直接修改原状态，错误
      return state;
    default:
      return state;
  }
}

正确示例：

// tokenReducer.js
function tokenReducer(state = {}, action) {
  switch(action.type) {
    case 'SET_TOKEN':
      return { ...state, token: action.payload }; // 返回新状态，正确
    default:
      return state;
  }
}

按以上步骤修改后，Metro刷新时应该会正确恢复之前保存的状态。

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