React-native-debugger: Redux hot reloading

[entropitor]

Hot reloading of the reducer function only works after another action is dispatched (the debugger also doesn't see the history of actions until this extra is dispatched)

Is there a way to notify the react-native-debugger of this hot reloading?

React Native Debugger version: 0.7.3
React Native version: 0.45.1
Platform: iOS
Is real device of platform: Simulator
Operating System: macOS

[entropitor]

I fixed this issue in the mean time. I changed my store.js file to export a configureStore function instead of a static store

i.e. from

import { createStore } from 'redux'
import reducer from './reducer.js'

const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
export default store

if (module.hot) {
  module.hot.accept(() => {
    const nextRootReducer = require('./reducer.js').default
    store.replaceReducer(nextRootReducer)
  })
}

to

import { createStore } from 'redux'
import reducer from './reducer.js'

export default function configureStore () {
  const store = createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )

  if (module.hot) {
    module.hot.accept(() => {
      const nextRootReducer = require('./reducer.js').default
      store.replaceReducer(nextRootReducer)
    })
  }

  return store
}

[entropitor]

When I'm trying to change another component I now get the Provider doesn't support changing the store on the fly (I only get it when I connect react-native-debugger via remote debugging, anybody got any clue why it doesn't work with react-native-debugger?

[jhen0409]

Could you provide a minimal example let I can try to reproduce or checkout the problem? It always works fine for me.

[entropitor]

https://github.com/entropitor/react-native-hot-reloading-error-example

When I enable live reloading, hot reloading, and react-native-debugger, I get the error when I try to edit counter.js

[jhen0409]

I saw the example and the error message, looks like you haven't followed official react-redux usage, https://github.com/reactjs/react-redux/issues/347#issuecomment-208964023 will explain the reason, it has a lot of related questions, and you can see example here that works fine.

Also, it's not only on debug mode I tried:

[entropitor]

I don't quite understand what's different in my example compared to your example, but creating store in index.ios.js and index.android.js and passing this as a prop to App.js works.

Thanks for the help 💯 . Sorry that I wasted your time. I really thought I was related to react-native-debugger 😢

[jeroenbourgois]

@entropitor how did you manage to pass the store as props with the registerComponent function?

[entropitor]

import React from 'react'
import { AppRegistry } from 'react-native';
import App from './App';

import configureStore from './app/store.js'
const store = configureStore()

AppRegistry.registerComponent('MyApp', () => () => <App store={store} />);