Reactotron: Redux Reactotron.createStore

[JakeHadley]

I've been looking through a lot of the issues associated with this and haven't been able to resolve my error. I'm getting the classic undefined is not a function (evaluating '_ReactotronConfig2.default.createStore(reducer, initialState)').

This is my App.js

import Reactotron from './ReactotronConfig';
import React, { Component } from 'react';
//import { createStore } from 'redux'
import { Provider } from 'react-redux'
import Stack from './src/screens/Stack'

const initialState = {
  checked: false
}

reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'CHECK':
      return {
        checked: true
      }
    case 'UNCHECK':
      return {
        checked: false
      }
    default:
      return state
  }
}

const store = Reactotron.createStore(reducer, initialState)

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Stack />
      </Provider>
    )
  }
}

This is my ReactotronConfig.js

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

Reactotron
  .configure()
  .useReactNative()
  .use(reactotronRedux())
  .connect()

I appreciate any pointers in the right direction for this.

[rmevans9]

import Reactotron from './ReactotronConfig';
import React, { Component } from 'react';
//import { createStore } from 'redux'
import { Provider } from 'react-redux'
import Stack from './src/screens/Stack'

function createZStore() {
  const initialState = {
    checked: false
  }

  reducer = (state = initialState, action) => {
    switch (action.type) {
      case 'CHECK':
        return {
          checked: true
        }
      case 'UNCHECK':
        return {
          checked: false
        }
      default:
        return state
    }
  }

  return Reactotron.createStore(reducer, initialState)
}

const store = createZStore()

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Stack />
      </Provider>
    )
  }
}

Out of interest can you try that?

[JakeHadley]

@rmevans9 Tried that, same result.

[rmevans9]

Doh - I read your code wrong. You are importing "Reactotron" like so:

import Reactotron from './ReactotronConfig'

but it seems you are not exporting anything from ReactotronConfig. So you either need to export the Reactotron object from there or import reactotron from reactotron-react-native again in your app file.

[JakeHadley]

What would be the right way to export that object then?

[rmevans9]

With the way you are importing it:

export default Reactotron

However you can avoid doing that and just import reactotron directly from reactotron-react-native again somewhere else and it will have the right methods attached to it.

[JakeHadley]

I just did

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

export default Reactotron 
  .configure()
  .useReactNative()
  .use(reactotronRedux())
  .connect() 

And now I get this undefined is not a function (evaluating 'a(b.apply(undefined, arguments))')

[rmevans9]

You wouldn't want to export the result of the connect() call

[JakeHadley]

Ok.
This is what I have now.

ReactotronConfig.js

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

Reactotron 
  .configure()
  .useReactNative()
  .use(reactotronRedux())
  .connect() 

App.js

import Reactotron from 'reactotron-react-native'
import React, { Component } from 'react';
//import { createStore } from 'redux'
import { Provider } from 'react-redux'
import Stack from './src/screens/Stack'

function createZStore() {
  const initialState = {
    checked: false
  }

  reducer = (state = initialState, action) => {
    switch (action.type) {
      case 'CHECK':
        return {
          checked: true
        }
      case 'UNCHECK':
        return {
          checked: false
        }
      default:
        return state
    }
  }

  return Reactotron.createStore(reducer, initialState)
}

const store = createZStore()

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Stack />
      </Provider>
    )
  }
}

And this is still giving an undefined is not a function, but it has a different evaluation: (evaluating '_reactotronReactNative2.default.createStore(reducer, initialState)')

[rmevans9]

Put import './ReactotronConfig' at the very top of the app file.

[JakeHadley]

I updated my comment to clarify what files are which. I do have it at the top.

[rmevans9]

Sorry if I was not clear. Make sure to import the ReactotronConfig file from within the App file.

import './ReactotronConfig'; // <- Here I am!
import Reactotron from 'reactotron-react-native'
import React, { Component } from 'react';
//import { createStore } from 'redux'
import { Provider } from 'react-redux'
import Stack from './src/screens/Stack'

function createZStore() {
  const initialState = {
    checked: false
  }

  reducer = (state = initialState, action) => {
    switch (action.type) {
      case 'CHECK':
        return {
          checked: true
        }
      case 'UNCHECK':
        return {
          checked: false
        }
      default:
        return state
    }
  }

  return Reactotron.createStore(reducer, initialState)
}

const store = createZStore()

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Stack />
      </Provider>
    )
  }
}

[JakeHadley]

Ah, I understand.

Same error: undefined is not a function (evaluating 'a(b.apply(undefined, arguments))')

The stack trace is different though, if that is significant at all...

[rmevans9]

I've replicated this locally. Give me a bit and I will get back to you.

[JakeHadley]

Sounds good. Thanks!

[rmevans9]

It turns out reactotron-redux does not like NOT having middleware applied. Simply updating to this fixes the issue:

import './ReactotronConfig';
import Reactotron from 'reactotron-react-native'
import React, { Component } from 'react';
import { Provider } from 'react-redux'
import { compose, applyMiddleware } from 'redux';
import { View, Text } from 'react-native';
import { createLogger } from 'redux-logger'
// import Stack from './src/screens/Stack'

const logger = createLogger()

function createZStore() {
  const initialState = {
    checked: false
  }

  reducer = (state = initialState, action) => {
    switch (action.type) {
      case 'CHECK':
        return {
          checked: true
        }
      case 'UNCHECK':
        return {
          checked: false
        }
      default:
        return state
    }
  }

  const middleware = applyMiddleware(logger);
  return Reactotron.createStore(reducer, initialState, compose(middleware))
}

const store = createZStore()

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <View><Text>I am here</Text></View>
      </Provider>
    )
  }
}

[rmevans9]

I am closing this in favor of #741 as it contains this issue and other changes that need to be done to reactotron-redux. I will hopefully have some time in the coming days to see if I can work out a way to fix this issue. Until then I suggest using the above workaround

[JakeHadley]

Ok, I'm not getting any errors now, which is awesome, thanks!

I'm just not getting reactotron to respond now. I did adb reverse tcp:9090 tcp:9090 in the past with this same project and it worked. Any suggestions on getting it to connect correctly?

[JakeHadley]

Oop, false alarm, got it. Thanks!