reactjsreact-nativereactotron

React Native: _reactotronReactNative2.default.createStore is not a function

In my React Native application, I could not get Reactotron working, meaning it would not connect to my app. The application did have "reactotron-react-native": "1.14.0", "reactotron-redux": "1.13.0",

and I upgraded to "reactotron-react-native": "^3.5.0", and "reactotron-redux": "^3.1.0" respectively and my application broke, but now it is connecting to the Reactotron UI:

enter image description here

Reactotron itself is telling me the issue is on line 53 of App.js file which is the last line of code below:

//eslint-disable-next-line
console.ignoredYellowBox = ["Setting a timer"];
import './ReactotronConfig';
import React, {PureComponent} from 'react';
import {
  StyleSheet,
  View,
  StatusBar,
  Linking,
  Platform,
  Alert,
} from 'react-native';
import {applyMiddleware, compose, combineReducers} from 'redux';
import {Provider} from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import Reactotron from 'reactotron-react-native';
import logger from 'logger';
import OneSignal from 'react-native-onesignal';
import SplashScreen from 'react-native-splash-screen';
import {Sentry} from 'react-native-sentry';
import {
  setJSExceptionHandler,
  setNativeExceptionHandler,
} from 'react-native-exception-handler';
import {jsHandler, nativeHandler} from 'utils/error-handlers';

import RootNavigation from 'navigation/RootNavigation';
import LocalStorage from 'services/LocalStorage';
import reducers from 'reducers';
import {
  setCurrentUser,
  validateUserInformationForVoterVoice,
} from 'auth/loginActions';
import {handleEventsDeepLink} from 'events/actions';
import {handleBallotsDeepLink} from 'surveys-ballots/actions';
import {setResetPasswordKey} from 'auth/registrationActions';
import {setNotificationData, deepLinkReceived} from 'navigation/actions';
import {view} from 'utils/view';
import {v2Colors} from 'theme';
import env from 'env';
import base from 'base-endpoint';
import * as appcenter from 'utils/appcenterLogger';
import * as cache from 'utils/cache';
import * as regex from 'utils/helpers/regex';

const appReducer = combineReducers({
  ...reducers,
});
const middleware = applyMiddleware(thunkMiddleware);
//react-native-debugger config
// eslint-disable-next-line no-underscore-dangle
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = Reactotron.createStore(appReducer, composeEnhancers(middleware));

I have just become familiar with the existence of Reactotron and it looks like it is an effective tool for debugging and I was wondering if anyone who is working with "reactotron-react-native": "^3.5.0", and "reactotron-redux": "^3.1.0" may know what is going on with line 53?

I am assuming it requires a refactor like most React Native breaking changes, but I have not found any documentation on how to configure the store of if that line is even necessary any more.

Solution

  • In accordance with the docs: https://github.com/infinitered/reactotron/blob/master/docs/plugin-redux.md

    I had to ensure I had imported createStore like so:

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

    and then refactor the store like so:

    const appReducer = combineReducers({
  ...reducers,
});
const middleware = applyMiddleware(thunkMiddleware);
//react-native-debugger config
// eslint-disable-next-line no-underscore-dangle
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
// const store = Reactotron.createStore(appReducer, composeEnhancers(middleware));
const store = createStore(appReducer, composeEnhancers(middleware, Reactotron.createEnhancer()));