React Native集成Redux-Persist遇PersistGate无限加载问题求助

Hey there! Let's figure out why your Redux-Persist rehydration isn't kicking in and that PersistGate is stuck loading. Based on the code snippet you shared, here are the most likely fixes to try:

It looks like your code cuts off at importing autoMergeLevel2—this is probably where the first issue lies. You need to fully define your persist config and properly wrap your root reducer with persistReducer. Here's a corrected, full version of your store.js:

import { createStore, combineReducers } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
// For React Native, use the official AsyncStorage library (not the old deprecated one)
import AsyncStorage from '@react-native-async-storage/async-storage';
import entriesReducer from './reducers/entries';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

// Full persist configuration
const persistConfig = {
  key: 'root', // The root key for your persisted state
  storage: AsyncStorage, // The storage engine to use
  stateReconciler: autoMergeLevel2, // Handles merging persisted state with initial state
  // Optional: Add blacklist if you don't want certain reducers persisted
  // blacklist: ['temporaryReducer']
};

// Combine all your reducers first
const rootReducer = combineReducers({
  entries: entriesReducer,
  // Add other reducers here if you have them
});

// Wrap the root reducer with persistReducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

// Create the store and persistor
export const store = createStore(persistedReducer);
export const persistor = persistStore(store);

A common mistake is misconfiguring PersistGate in your main App component. Make sure it's nested inside the Redux Provider and receives the correct persistor prop:

import React from 'react';
import { Text, View } from 'react-native';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';
import MainApp from './MainApp'; // Your actual app component

export default function App() {
  return (
    <Provider store={store}>
      {/* PersistGate must be inside the Provider */}
      <PersistGate 
        loading={<View><Text>Loading...</Text></View>} 
        persistor={persistor}
      >
        <MainApp />
      </PersistGate>
    </Provider>
  );
}

If you're using a newer React Native version, the old AsyncStorage from react-native is deprecated. You need to install the official replacement:

# Using npm
npm install @react-native-async-storage/async-storage

# Using yarn
yarn add @react-native-async-storage/async-storage

# For iOS, run pod install after
cd ios && pod install && cd ..

Redux-Persist relies on reducers returning new state objects (not mutating the existing state). If your entriesReducer mutates state directly, persistence/rehydration will fail silently. Fix your reducer to follow immutability rules:

// ❌ Bad: Mutating state directly
case 'ADD_ENTRY':
  state.entries.push(action.payload);
  return state;

// ✅ Good: Returning a new state object
case 'ADD_ENTRY':
  return {
    ...state,
    entries: [...state.entries, action.payload]
  };

Add debug: true to your persistConfig to see detailed logs in the console—this will help you spot if storage is failing or rehydration is being interrupted:

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  stateReconciler: autoMergeLevel2,
  debug: true, // Enable debug logs
};

Start with these steps—most of the time, the issue is either an incomplete persist config, misconfigured PersistGate, or missing AsyncStorage setup.

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