React-redux: Hot reloading failed with react-native

Created on 19 Apr 2016 · 6Comments · Source: reduxjs/react-redux

I don't know react-native or react-redux has the problem, but I think it be ignored if I post it as react-native's issues.

I created a project to reproduce this: https://github.com/cpunion/ReproRN24HMRWithReactRedux

Create steps

$ react-natie init TestHMR24
$ cd TestHMR24
add reducer.js
modify index.ios.js to add store, Provider

Test steps

open ios/TestHMR24.xcodeproj
run on simulator
enable Hot Reloading

2016-04-19 12 10 59

touch reducer.js, has error

2016-04-19 12 11 12

touch reducer.js, get well
After this step, hot reloading always success, just failed on first update.

Source

cpunion

Most helpful comment

Used a workaround, just put store into a state or object field:

class App extends Component {
  state = {
    store: configureStore()
  }
  render () {
    return (
      <Provider store={this.state.store}>
        <TestHMR24/>
      </Provider>
    )
  }
}

cpunion on 19 Apr 2016

👍13 ❤3

All 6 comments

Updated repo, touch view may see the state changes.

cpunion on 19 Apr 2016

I found my code has error, react-native's HMR has different module.hot.accept method, it's not accept(path, callback), it's accept(callback), so it just used it in configureStore module. I fixed code, but same result.

cpunion on 19 Apr 2016

❤2

Used a workaround, just put store into a state or object field:

class App extends Component {
  state = {
    store: configureStore()
  }
  render () {
    return (
      <Provider store={this.state.store}>
        <TestHMR24/>
      </Provider>
    )
  }
}

cpunion on 19 Apr 2016

👍13 ❤3

This is not really our issue so closing. The error comes up if Provider receives a different store instance via props. It is up to you to figure out how to avoid it in your setup.