清除缓存后React Native应用Redux离线模块报错求助

Alright, let's dig into this issue you're facing. The error popping up only after clearing cache (and working fine on reload) points to problems with how your Redux state is being rehydrated when combining @redux-offline/redux-offline and redux-persist. Here's a breakdown of the root causes and actionable fixes:

Root Causes #

1. Redux-Persist Version Conflict: Your yarn.lock shows two versions of redux-persist (4.10.2 required by @redux-offline/redux-offline@2.3.2 and 5.9.1 installed separately). This mismatch leads to inconsistent state hydration logic, causing inboundState to be non-object (or undefined) on first launch after cache clear.
2. Invalid Initial State: You're passing an empty array [] as the initial state to createStore, but Redux expects an object type. This breaks state merging during rehydration.

Step-by-Step Fixes #

1. Resolve Redux-Persist Version Conflict #

Since @redux-offline/redux-offline@2.3.2 explicitly depends on redux-persist@^4.5.0, having v5.x alongside it causes dependency chaos. Fix this by forcing the compatible version:

yarn add redux-persist@4.10.2 --force

Or explicitly lock the version in your package.json:

"redux-persist": "4.10.2"

Then reinstall dependencies:

yarn install

2. Fix the Initial State in createStore #

Redux requires the initial state to be an object. Update your createStore call in App.js:

export const store = createStore(
  persistedReducer,
  {}, // Replace empty array [] with empty object {}
  compose(
    offline(offlineConfig)
  )
)

3. Add a Safety Check for State Rehydration (Optional but Recommended) #

To guard against non-object state values during rehydration, add a custom stateReconciler to your offline config. This acts as a fallback if the stored state is corrupted or missing:

// Import the default reconciler from redux-offline
import { defaultStateReconciler } from '@redux-offline/redux-offline/lib/defaults';

// Custom reconciler to ensure inboundState is always an object
const safeStateReconciler = (inboundState, defaultState, reducedState) => {
  // Fallback to default state if inboundState is not a valid object
  if (typeof inboundState !== 'object' || inboundState === null) {
    return defaultState;
  }
  // Use the default logic for valid states
  return defaultStateReconciler(inboundState, defaultState, reducedState);
};

// Update your offline config
offlineConfig.stateReconciler = safeStateReconciler;

4. Ensure Persistor is Properly Initialized #

Your provided code is missing the persistor creation step. Add this right after creating the store:

export const persistor = persistStore(store);

Why This Works #

• Resolving the version conflict ensures @redux-offline/redux-offline and redux-persist use compatible logic for state hydration.
• Using an object as the initial state aligns with Redux's requirements, preventing type errors during state merging.
• The custom stateReconciler adds a safety net to handle unexpected state values from the cache, ensuring the app boots even if the stored state is invalid.

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