React Native中Redux Toolkit Persist报错：Cannot read property 'type' of undefined

1. Redux Toolkit Persist 配置错误 #

• 检查store.js中是否正确完成 persist 配置，常见错误点：
  • 未用persistReducer正确包裹根 reducer，或persistConfig的key、storage参数设置错误
  • 忘记导出persistor，或在入口文件中未用PersistGate包裹 App 组件
  • 正确配置示例：

    // store.js
    import { configureStore } from '@reduxjs/toolkit';
    import { persistStore, persistReducer } from 'redux-persist';
    import AsyncStorage from '@react-native-async-storage/async-storage';
    import houseReducer from './slices/houseSlice';
    
    const persistConfig = {
      key: 'root',
      storage: AsyncStorage,
    };
    
    const persistedReducer = persistReducer(persistConfig, houseReducer);
    
    export const store = configureStore({
      reducer: persistedReducer,
      middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
          serializableCheck: false, // 关闭序列化检查，避免 persist 相关警告
        }),
    });
    
    export const persistor = persistStore(store);
    

2. Slice 定义错误 #

• 检查setHouse.jsx对应的 slice 是否正确定义 action，错误的 action 创建会触发TypeError: Cannot read property 'type' of undefined：
  • 必须用createSlice正确定义 reducers，并导出对应的 action 方法
  • 正确示例：

    // houseSlice.js
    import { createSlice } from '@reduxjs/toolkit';
    
    const initialState = {
      numberHouse: 0,
    };
    
    const houseSlice = createSlice({
      name: 'house',
      initialState,
      reducers: {
        setNumberHouse: (state, action) => {
          state.numberHouse = action.payload;
        },
        incrementHouse: (state) => {
          state.numberHouse += 1;
        },
      },
    });
    
    export const { setNumberHouse, incrementHouse } = houseSlice.actions;
    export default houseSlice.reducer;
    

3. 组件触发 Action 方式错误 #

• 检查按钮触发代码，确保正确导入 action 并通过useDispatch调用：
  • 错误示例：直接调用 action 而非通过 dispatch，或导入了错误的 action
  • 正确示例：

    import { useDispatch, useSelector } from 'react-redux';
    import { incrementHouse } from '../slices/houseSlice';
    
    const SomeComponent = () => {
      const dispatch = useDispatch();
      const numberHouse = useSelector(state => state.numberHouse);
    
      return (
        <Button
          title="More Info"
          onPress={() => dispatch(incrementHouse())}
        />
      );
    };
    

4. PersistGate 配置问题 #

• 检查index.js中是否用PersistGate正确包裹 App 组件，确保persistor参数传入正确：

  // index.js
  import { Provider } from 'react-redux';
  import { PersistGate } from 'redux-persist/integration/react';
  import { store, persistor } from './store';
  import App from './App';
  
  const Root = () => (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  );
  
  AppRegistry.registerComponent(appName, () => Root);
  

5. 状态未持久化的排查 #

• 控制台始终输出{"numberHouse": 0}说明持久化未生效，可能原因：
  • 未安装或正确链接@react-native-async-storage/async-storage，执行npm install @react-native-async-storage/async-storage后重新编译项目
  • persistConfig未包含需要持久化的状态字段，确保 slice 的 state 结构与 persist 配置匹配

内容的提问来源于stack exchange，提问作者Count of Monte Cristo