Question

（React Native version 0.27.2）

我在模拟器中打开了“Hot Reloading”。当我进行更改（例如添加调试<Text>元素）时，顶部会显示灰色的“热门加载”栏，并将以下内容记录到Xcode控制台：

 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

此外，打包者记录以下内容：

[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)

然而，没有任何改变。即使将文本元素添加到我的最顶层元素，它也不会出现。只有完全重新加载（模拟器中的Cmd+R）才会显示它。

我可以检查哪些事情我可能做错了？

这是我的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"
  }
}

更新1

我很确定它与Redux有关。 https://facebook.github.io/react-native/releases/next/#redux-stores

但是，我已按照此处的说明更新了我的商店创建代码。这是我的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
}

我抱有希望，但现在每当我改变任何东西时，我都会收到消息

<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.

日志输出“检测到热重载”和“已接受”，但不是“替换减速器......”

Answer 1

我现在可以回答我自己的问题：问题是我有多个RCTRootView，每个都有自己的包实例，所以这导致创建了多个商店。它看起来像这样：

        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)

一旦我将其更改为使用单个RCTBridge实例，这就解决了我的问题（并且还确保我的Redux reducer正确地导致connect() ed组件被重新渲染（顺便说一下）：

 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: [:])

React Native Hot Reloading：“<provider>不支持动态更改`store`”

1 个答案: