使用Redux配置Reactotron时遇store未定义类型错误求助

我尝试使用Reactotron查看Redux状态，但遇到以下错误：

TypeError: Cannot read property 'store' of undefined

配置代码（ReactotronConfig.js） #

import Reactotron from 'reactotron-react-native';
import {
  QueryClientManager,
  reactotronReactQuery,
} from 'reactotron-react-query';
import { reactotronRedux } from 'reactotron-redux';

import { queryClient } from '@/api/config';

const queryClientManager = new QueryClientManager({
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  queryClient,
});
const reactotron = Reactotron.use(reactotronReactQuery(queryClientManager))
  .configure({
    name: 'myRAC',
    onDisconnect: () => {
      queryClientManager.unsubscribe();
    },
  })
  .useReactNative({
    networking: {
      ignoreUrls:
        /symbolicate|https:\/\/images\.contentstack\.io\/v3\/a|https:\/\/www\.google\.com\//,
    },
  })
  .use(reactotronRedux())
  .connect();

export default reactotron;

Store.ts代码 #

import AsyncStorage from '@react-native-async-storage/async-storage';
import { configureStore } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import {
  FLUSH,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
  REHYDRATE,
  persistReducer,
  persistStore,
} from 'reduxjs-toolkit-persist';
import autoMergeLevel2 from 'reduxjs-toolkit-persist/lib/stateReconciler/autoMergeLevel2';
import { PersistConfig } from 'reduxjs-toolkit-persist/lib/types';

import Reactotron from '../../ReactotronConfig';

import rootReducer, { AppState } from './reducers/index';
import { rootSaga } from './sagas/index';

const persistConfig: PersistConfig<AppState> = {
  key: 'root',
  storage: AsyncStorage,
  blacklist: ['onboarding'],
  stateReconciler: autoMergeLevel2,
};

const sagaMiddleware = createSagaMiddleware();
const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        /* ignore persistance actions */
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    })
      .concat(sagaMiddleware)
      .concat(Reactotron.createEnhancer()),
});

export { useAppSelector } from './hooks/useAppSelector';
export const persistor = persistStore(store);
sagaMiddleware.run(rootSaga);

这个错误的核心是Reactotron的Redux插件初始化顺序错误，导致createEnhancer无法正确关联store实例，按以下步骤修复：

1. 调整Reactotron插件加载顺序
   将use(reactotronRedux())移到configure方法之后、其他插件之前，确保Redux插件优先初始化：

   const reactotron = Reactotron.configure({
     name: 'myRAC',
     onDisconnect: () => {
       queryClientManager.unsubscribe();
     },
   })
   .use(reactotronRedux()) // 优先加载Redux插件
   .use(reactotronReactQuery(queryClientManager))
   .useReactNative({
     networking: {
       ignoreUrls:
         /symbolicate|https:\/\/images\.contentstack\.io\/v3\/a|https:\/\/www\.google\.com\//,
     },
   })
   .connect();
   

2. 确保Reactotron实例在store创建前完成初始化
   检查项目中ReactotronConfig的导入时机，必须保证在Store.ts导入它之前，Reactotron已经完成配置并连接。

3. 添加环境判断避免生产环境报错
   在生产环境下禁用Reactotron，防止不必要的初始化问题：

   • 修改ReactotronConfig：

     const reactotron = __DEV__ 
       ? Reactotron.configure({...}).use(...).connect()
       : null;
     
     export default reactotron;
     

   • 修改Store.ts中的middleware配置：

     .concat(__DEV__ && Reactotron ? Reactotron.createEnhancer() : (x) => x)
     

4. 验证persistStore的调用时机
   确保persistStore(store)在store创建完成后调用，避免干扰Reactotron对store的监听。

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