Reactotron: [V2] Reactotron-Redux Integration Problems

[LewisBr]

Doing a new installation using the V2 beta and having troubles getting the Redux integration working. Using:

"reactotron-react-native": "2.0.0-beta.10",
"reactotron-redux": "2.0.0-beta.10",
"reactotron-redux-saga": "2.0.0-beta.10",

[Entry point]
import "../services/reactotron/reactotron-config"
import Reactotron from "reactotron-react-native"

const store = Reactotron.createStore(rootReducer)

And my config is set up with the plugin.

Getting the following error though:
"message": "undefined is not a function (evaluating 'a(b.apply(undefined, arguments))')",
and before that seeing a failure of:
null is not an object (evaluating 'reduxStore.getState') -- presuming this is from the plugin.

When I use just redux the implementation works just fine. Anyone have any ideas?

[rmevans9]

It almost feels like Reactotron.createStore is being called before reactotron is setup. Can you show whats in reactotron-config?

[LewisBr]

import Reactotron, {
  trackGlobalErrors,
  openInEditor,
  overlay,
  asyncStorage,
  networking,
} from "reactotron-react-native"
import { reactotronRedux } from "reactotron-redux"
// import sagaPlugin from "reactotron-redux-saga"

Reactotron.configure({
  name: "React Native Demo",
})
  .use(trackGlobalErrors())
  .use(openInEditor())
  .use(overlay())
  .use(asyncStorage())
  .use(networking())
  .use(reactotronRedux())
  // .use(sagaPlugin())
  .connect()

Commented out the saga plugin until I get the redux plugin working first.

[atlonis]

I have same problem, I decided this when I put these versions
"reactotron-react-native": "^1.14.0", "reactotron-redux": "^1.13.0", "reactotron-redux-saga": "^1.13.0"

[LewisBr]

So I was initially running v1.14, but it was breaking using the CLI/Desktop app (Using v2). Are you using the 1.14 desktop version as well?

[atlonis]

Yes, i use desktop version

[LewisBr]

Yea, but is it version 1.14 or 2 on desktop version? There's a version file in the root installation directory. If that's the case I might just revert mine back to v1.14 and open an issue with v2.

[rmevans9]

@LewisBr sorry I dropped off on you on this one. Would it be possible to put a small reproduction repo up on github? Doesn't have to be your entire project, just something that is enough for me to troubleshoot this.

[Titozzz]

Same issue, just tried to use redux plugin on V2 and got null is not an object in reduxStore.getState inside the sendSubscriptions function.

EDIT: it happend when I add the .use(reactotronRedux()) which is at the top level of my app, so it looks like it's tryng to send something before my store is configured just a few lines later

[adrienthiery]

Hi there,

I was setting that up today and encountered the same issue.

It seems to me that it is because the use Reactotron's createStore statement is misleading, 'cause it pushes you to do :

import Reactotron from "reactotron-react-native"

const store = Reactotron.createStore(rootReducer)

when it expects you to use the result of the ReactotronConfig.js:

// ReactotronConfig.js
import Reactotron from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';

const reactotron = Reactotron
    .configure({ name: 'Morcare' })
    .use(reactotronRedux())
    .useReactNative()
    .connect();

export default reactotron;

// store.js
- import { createStore } from 'redux'
+ import Reactotron from '../ReactotronConfig'

- const store = createStore(rootReducer)
+ const store = Reactotron.createStore(rootReducer)

I proposed to clarify the docs : https://github.com/infinitered/reactotron/pull/773

[skellock]

Docs updated by @adrienthiery cuz he's awesome. ❤️

[njleonzhang]

following this step still get error, a is not a function

[adrienthiery]

@njleonzhang : Would you mind sharing some code (how you initialize reactotron, etc.) and the full stack trace plz?

[njleonzhang]

@adrienthiery just following the document.

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

Reactotron
  .configure() // controls connection & communication settings
  .use(reactotronRedux())
  .useReactNative() // add all built-in react native plugins
  .connect()

export default Reactotron

import rootReducer from './reducer'

export default Reactotron.createStore(rootReducer)    <----- error
export { RootState } from './reducer'

[adrienthiery]

@njleonzhang How do you import Reactotron in your 2nd snippet ?

[njleonzhang]

yeah, I import it from the first file.

// import { createStore } from 'redux'
import Reactotron from '../services/ReactotronConfig'
import rootReducer from './reducer'

export default Reactotron.createStore(rootReducer)
// export default createStore(rootReducer)
export { RootState } from './reducer'

[adrienthiery]

@njleonzhang : Got it.

You have:

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

Reactotron
  .configure() // controls connection & communication settings
  .use(reactotronRedux())
  .useReactNative() // add all built-in react native plugins
  .connect()

export default Reactotron

But you need to :

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

- Reactotron
+ const instance = Reactotron
  .configure() // controls connection & communication settings
  .use(reactotronRedux())
  .useReactNative() // add all built-in react native plugins
  .connect()

- export default Reactotron
+ export default instance

[njleonzhang]

@adrienthiery things doesn't change， even I put all the code in one file.

import rootReducer from './reducer'
import Reactotron from 'reactotron-react-native'
import { reactotronRedux } from 'reactotron-redux' 

let instance = Reactotron
  .configure() // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .use(reactotronRedux())
  .connect()

export default instance.createStore(rootReducer)
export { RootState } from './reducer'

the crash happened in redux, compose.js

  return funcs.reduce(function (a, b) {
    return function () {
      return a(b.apply(undefined, arguments));   // a is not a function.
    };
  });

[adrienthiery]

Would calling .use(reactotronRedux()) before .useReactNative() change anything ?

Otherwise, do you think you could recreate the issue in a snack.expo.io please?

[njleonzhang]

@adrienthiery no good luck. I will try to recreate the issue later, tnx for your effort.

[njleonzhang]

@adrienthiery there is a bug in the source code. I have created PR to fix it. https://github.com/infinitered/reactotron/pull/878

[Davidiasdesousa]

It almost feels like Reactotron.createStore is being called before reactotron is setup. Can you show whats in reactotron-config?

Thanks... In my case, simply repositioning the reactotron config import above the route imports.