React Native集成Redux+Reactotron报错：undefined is not an object evaluating console.tron.createSagaMonitor

Hey, let's break down this error and fix it step by step! The core issue here is that console.tron isn't properly attached to your global console object when your code tries to call createSagaMonitor(). There are also a couple of small code issues that might be contributing. Let's tackle them one by one:

1. Fix Reactotron Initialization (The Root Cause) #

You need to make sure Reactotron is fully set up and mounted to console.tron before your Redux/Saga code runs.

Create a dedicated ReactotronConfig.js file (or add this code to your app's entry point like index.js):

import Reactotron from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';
import reactotronSaga from 'reactotron-redux-saga';

if (__DEV__) {
  // Initialize Reactotron with required plugins
  const tron = Reactotron.configure()
    .useReactNative() // Add all React Native built-in tools
    .use(reactotronRedux()) // Connect to Redux
    .use(reactotronSaga()) // Enable saga monitoring
    .connect(); // Link to the Reactotron desktop app

  // Attach the tron instance to console so your store code can access it
  console.tron = tron;

  // Optional: Clear old logs when the app starts
  tron.clear();
}

Make sure you import this config file first in your app's entry point—before any Redux or Saga-related code loads.

2. Fix the Typo in Your Code #

I noticed a small typo in your import that could break reducer persistence (and indirectly cause store setup issues):

// Wrong: Missing an 'i' in "persist"
import persistReducers from './persirstReducers';

// Correct:
import persistReducers from './persistReducers';

3. Verify Dependency Compatibility #

Since you updated your dependencies, double-check that:

• reactotron-redux-saga is compatible with your installed version of redux-saga
• All Reactotron packages (reactotron-react-native, reactotron-redux, reactotron-redux-saga) are on their latest stable versions

You can update them with this command:

npm install redux-saga@latest reactotron-react-native@latest reactotron-redux@latest reactotron-redux-saga@latest

4. Ensure Your createStore Uses the Reactotron Enhancer #

If your createStore.js doesn't already include the Reactotron enhancer, update it to leverage console.tron.createEnhancer() in dev mode:

import { createStore, applyMiddleware, compose } from 'redux';

export default (reducers, middlewares) => {
  const enhancer = __DEV__
    ? compose(
        console.tron.createEnhancer(), // Add Reactotron enhancer first
        applyMiddleware(...middlewares)
      )
    : applyMiddleware(...middlewares);

  return createStore(reducers, enhancer);
};

Final Check #

After making these changes, restart your Metro bundler and rebuild your app. The error should disappear, and you'll be able to monitor your Redux store and sagas in Reactotron as expected.

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