CODEWITHSUNDEEP
react-native
John Goering
John Goering

Reputation: 39030

React Native Hot Reloading: "<Provider> does not support changing `store` on the fly"

(React Native version 0.27.2)

I have turned on "Hot Reloading" in the simulator. When I make a change, such as adding a debug <Text> element, the grey "Hot loading" bar appears at the top, and the following is logged to the Xcode console:

 2016-06-16 09:47:52.276 [info][tid:com.facebook.react.JavaScript] [React Transform HMR] Patching _component
 2016-06-16 09:47:52.283 [info][tid:com.facebook.react.JavaScript] [React Transform HMR] Patching _component

Also, the following is logged by the packager:

[Hot Module Replacement] File change detected (9:47:49:334)
[Hot Module Replacement] File change detected (9:47:49:336)
[9:47:52 AM] <START> find dependencies
[9:47:52 AM] <START> find dependencies
[9:47:52 AM] <END>   find dependencies (0ms)
[9:47:52 AM] <END>   find dependencies (1ms)
[Hot Module Replacement] Sending HMR update to client (9:47:52:255)
[Hot Module Replacement] Sending HMR update to client (9:47:52:256)
[9:47:52 AM] <START> request:/ReactComponent/components/App.map?platform=ios&runModule=false&entryModuleOnly=true&hot=true
[9:47:52 AM] <START> find dependencies
[9:47:53 AM] <END>   find dependencies (837ms)
[9:47:53 AM] <END>   request:/ReactComponent/components/App.map?platform=ios&runModule=false&entryModuleOnly=true&hot=true (843ms)
[9:47:53 AM] <START> request:/ReactComponent/components/App.map?platform=ios&runModule=false&entryModuleOnly=true&hot=true
[9:47:53 AM] <END>   request:/ReactComponent/components/App.map?platform=ios&runModule=false&entryModuleOnly=true&hot=true (2ms)

However, nothing changes. The text element does not appear, even when adding it to my topmost element. Only a full reload (Cmd+R in the simulator) causes it to appear.

What are some things I can check that I may be doing wrong?

Here is my package.json:

{
  "name": "myappname",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "(JS_DIR=`pwd`/ReactComponent; cd node_modules/react-native; npm run start -- --root $JS_DIR)"
  },
  "dependencies": {
    "react": "^15.1.0",
    "react-addons-update": "^15.1.0",
    "react-native": "^0.27.2",
    "react-native-navbar": "^1.5.0",
    "react-native-search-bar": "^2.11.0",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2",
    "redux-logger": "^2.6.1",
    "redux-persist": "^3.2.2",
    "redux-thunk": "^1.0.3"
  }
}

Update 1

I am pretty sure it has something to do with Redux. https://facebook.github.io/react-native/releases/next/#redux-stores

However, I have updated my store creation code as described there. Here is my configureStore.js:

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import devTools from 'remote-redux-devtools'
import mainReducer from './reducers'
import {persistStore, autoRehydrate} from 'redux-persist'

export default function configureStore() {
    const enhancer = compose(applyMiddleware(thunk), devTools(), autoRehydrate())
    const store = createStore(mainReducer, undefined, enhancer)
    if (module.hot) {
        console.log("hot reload detected")
        if (module.hot.accept) {
          console.log("have accept")            
        }
        module.hot.accept(() => {
            console.log("replacing reducer...")            
            const nextRootReducer = require('./reducers/index').default
            store.replaceReducer(nextRootReducer)
        })
    } else {
        console.log("no hot reload???!")
    }
    persistStore(store)
    return store
}

I had my hopes up, but now whenever I change anything, I get the message

<Provider> does not support changing `store` on the fly. It is most
likely that you see this error because you updated to Redux 2.x and
React Redux 2.x which no longer hot reload reducers automatically.
See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 
for the migration instructions.

The log outputs "hot reload detected" and "have accept", but NOT "replacing reducer..."

Upvotes: 1

Views: 1532

Answers (1)

John Goering
John Goering

Reputation: 39030

I can now answer my own question: The problem was that I had multiple RCTRootViews each with their own bundle instance, so this was leading to multiple stores being created. It looked like this:

        let jsCode =
            NSURL(string: "http://10.10.11.60:8081/index.ios.bundle?platform=ios&dev=true")
        rootView = RCTRootView(bundleURL: jsCode, moduleName: self.moduleName, initialProperties:[:], launchOptions: nil)

Once I changed it to use a single RCTBridge instance instead, this solved the issue for me (and also made sure my Redux reducer correctly led the connect()ed components to being re-rendered, by the way):

 let jsCode =
NSURL(string: "http://10.10.11.60:8081/index.ios.bundle?platform=ios&dev=true")
 let singletonBridge = RCTBridge(bundleURL: jsCode, moduleProvider: nil, launchOptions: nil)
 ...
        rootView = RCTRootView(bridge: singletonBridge, moduleName: self.moduleName, initialProperties: [:])

Upvotes: 2

Related Questions