Ignite: Error when connecting the router to redux

[chapati23]

• [x] Issue does not already exist
• [x] ignite base application
• [x] ignite doctor:

  Platform: darwin

Ignite
  Version: 1.12.0
  Path: /Users/felipe/.nvm/versions/node/v7.2.0/bin/ignite

Node
  Version: v7.2.0
  Path: /Users/felipe/.nvm/versions/node/v7.2.0/bin/node

NPM
  Version: 4.0.3
  Path: /Users/felipe/.nvm/versions/node/v7.2.0/bin/npm

Yeoman
  Version:

React Native CLI
  Version: 1.3.0

App
  React Native Version: 0.37.0

Steps to reproduce:

• Create new ignite app ignite new sampleApp
• Connect the router to redux as per the official docs (see screenshot below)
• Start the app
• Navigate somewhere
• Hit the back-button (JS needs to be loaded from the bundle to reproduce. When it's being served directly from packager it seems to work fine.)
• Watch this redscreen of death with error message "Attempted to assign to readonly property":

[chapati23]

I realize that this might be more of a react-native-router-flux error. I'll open an issue there, too (adding to the awe-inspiring other 342 issues). Was just hoping someone had seen this before and knows what's wrong.

UPDATE: created a ticket in react-native-router-flux as well: https://github.com/aksonov/react-native-router-flux/issues/1469

[benvp]

Ran into the same issue today. But I didn't start with the ignite project. The issue occurred as soon as I added reactotron-redux to the project.

[skellock]

When rnrf is hooked up to redux then Reactotron will attempt to log the rnrf state tree. Problem is it has circular refs. So I had to strip those out.

It might be the source of your problem.

You can turn this off by adding safeRecursion: false into your configure({}) statement in your ReactotronConfig.js

If that error goes away but it is replaced by another error that says Socket.io binary error stack overflow, then this is the definately the issue.

Another option is to tell Reactotron to ignore those redux events by placing the proper rnrf messages in the except array (again in ReactotronConfig.js.

reactotronRedux({
  except: ['']
})

I can't remember what they are. Something like PUSH, POP, FOCUS, REPLACE, etc.

I'll take a look in the morning, though, and see if I can find out more details.

[chapati23]

interesting. excluding the rnrf actions _does_ fix the issue. thanks for the pointer!

here's the complete list i excluded, in case other people stumble over this:

      except: [
        'REACT_NATIVE_ROUTER_FLUX_BACK',
        'REACT_NATIVE_ROUTER_FLUX_BACK_ACTION',
        'REACT_NATIVE_ROUTER_FLUX_FOCUS',
        'REACT_NATIVE_ROUTER_FLUX_JUMP',
        'REACT_NATIVE_ROUTER_FLUX_POP_AND_REPLACE',
        'REACT_NATIVE_ROUTER_FLUX_POP_TO',
        'REACT_NATIVE_ROUTER_FLUX_PUSH',
        'REACT_NATIVE_ROUTER_FLUX_REFRESH',
        'REACT_NATIVE_ROUTER_FLUX_REPLACE',
        'REACT_NATIVE_ROUTER_FLUX_RESET'
      ]

Hitting the back-button is _only_ very laggy after blacklisting, but at least it works.
For the performance issues to disappear I had to also add the rnrf actions to the redux-logger blacklist.

[skellock]

Thanks man. Do you have Remote debugging turned on? That causes a boat of load of lag when logging through chrome.

[skellock]

Also, I'm going to track it over on Reactotron's issues as it's more related there.

Thanks kindly for taking the time to raise this issue.

[codeithuman]

Thanks for this 👍

Was able to fix the issue on my project with:

ReactotronConfig.js

    .use(reactotronRedux({
      except: [
        'REACT_NATIVE_ROUTER_FLUX_BACK',
        'REACT_NATIVE_ROUTER_FLUX_BACK_ACTION',
        'REACT_NATIVE_ROUTER_FLUX_FOCUS',
        'REACT_NATIVE_ROUTER_FLUX_JUMP',
        'REACT_NATIVE_ROUTER_FLUX_POP_AND_REPLACE',
        'REACT_NATIVE_ROUTER_FLUX_POP_TO',
        'REACT_NATIVE_ROUTER_FLUX_PUSH',
        'REACT_NATIVE_ROUTER_FLUX_REFRESH',
        'REACT_NATIVE_ROUTER_FLUX_REPLACE',
        'REACT_NATIVE_ROUTER_FLUX_RESET'
      ]
    }))

CreateStore.js

  /* ------------- Logger Middleware ------------- */

  const SAGA_LOGGING_BLACKLIST = ['EFFECT_TRIGGERED', 'EFFECT_RESOLVED', 'EFFECT_REJECTED']
  const FLUX_LOGGING_BLACKLIST = [
    'REACT_NATIVE_ROUTER_FLUX_BACK', 'REACT_NATIVE_ROUTER_FLUX_BACK_ACTION',
    'REACT_NATIVE_ROUTER_FLUX_FOCUS', 'REACT_NATIVE_ROUTER_FLUX_JUMP',
    'REACT_NATIVE_ROUTER_FLUX_POP_AND_REPLACE', 'REACT_NATIVE_ROUTER_FLUX_POP_TO',
    'REACT_NATIVE_ROUTER_FLUX_PUSH', 'REACT_NATIVE_ROUTER_FLUX_REFRESH',
    'REACT_NATIVE_ROUTER_FLUX_REPLACE', 'REACT_NATIVE_ROUTER_FLUX_RESET'
  ]

  if (__DEV__) {
    const USE_LOGGING = Config.reduxLogging
    const logger = createLogger({
      predicate: (getState, { type }) =>
        USE_LOGGING
        && R.not(R.contains(type, SAGA_LOGGING_BLACKLIST))
        && R.not(R.contains(type, FLUX_LOGGING_BLACKLIST)),
      stateTransformer: (immutableObject) => keysToJs(immutableObject),
    })
    middleware.push(logger)
  }