Reactotron setup using redux, store undefined

I am trying to use reactotron to view my redux state, aI get the error:

TypeError: Cannot read property 'store' of undefined

Can anyone help?

Config:

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.createEnhancer() appears to be a store enhancer, not a middleware. It should be added to enhancers, not middleware.

See Reactotron: Using with Redux-Toolkit configureStore.

Using Redux-Toolkit's configureStore, add as an enhancer.

export const store = configureStore({
  reducer: persistedReducer,
  enhancers: __DEV__ ? [reactotron.createEnhancer!()] : [],
})

Update your code to add the Reactotron enhancer to the store's enhancers:

Example:

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