无法热更新模块

Question

我正在尝试让热重载在我的React应用程序中工作，但我不确定如何调试这个错误。

​

​

我的应用程序索引如下所示：

import React from 'react'
import ReactDOM from 'react-dom'
import Routes from 'routes/index'
import { browserHistory } from 'react-router'
import syncHistoryWithStore from 'modules/routing/sync'

function createStore (browserHistory) {
  let factory = require('./modules/store')

  const store = factory.createStore(browserHistory)

  if (module.hot) {
    module.hot.accept('./modules/store', () => {
      const nextFactory = require('./modules/store')
      nextFactory.hydrateStore(store, factory.dehydrateStore(store))
      factory = nextFactory
    })
  }

  return store
}

const store = createStore(browserHistory)
const history = syncHistoryWithStore(browserHistory, store, {
  selectLocationState: state => state.routing,
  adjustUrlOnReplay: true
})

ReactDOM.render(
  <Routes history={history} store={store} />,
  document.getElementById('root')
)

当我试图修改我的任何react组件时，就会出现错误。这些更新是通过routes/index路径进行的。但是我不明白为什么我使用的ides的react-redux-universal-hot-example可以工作，而我的却不行？

我可以看到在热示例中，只有'reducer‘路径有一个hot.accept，所以我不太理解got重载react组件是如何工作的，但它们就是这样做的……

对如何调试有什么建议或想法吗？

Answer 1

如果我把它和react-hot-loader结合起来，它就能工作：

import { AppContainer } from 'react-hot-loader'
import React from 'react'
import ReactDOM from 'react-dom'
import Routes from 'routes/index'
import { browserHistory } from 'react-router'
import syncHistoryWithStore from 'modules/routing/sync'

function createStore (browserHistory) {
  let factory = require('./modules/store')

  const store = factory.createStore(browserHistory)

  if (module.hot) {
    module.hot.accept('./modules/store', () => {
      const nextFactory = require('./modules/store')
      nextFactory.hydrateStore(store, factory.dehydrateStore(store))
      factory = nextFactory
    })
  }

  return store
}

const store = createStore(browserHistory)
const history = syncHistoryWithStore(browserHistory, store, {
  selectLocationState: state => state.routing,
  adjustUrlOnReplay: true
})

ReactDOM.render(
  <AppContainer>
    <Routes history={history} store={store} />
  </AppContainer>,
  document.getElementById('root')
)

if (module.hot) {
  module.hot.accept('./routes/index', () => {
    // If you use Webpack 2 in ES modules mode, you can
    // use <App /> here rather than require() a <NextApp />.
    const NextRoutes = require('./routes/index').default
    ReactDOM.render(
      <AppContainer>
        <NextRoutes history={history} store={store} />
      </AppContainer>,
      document.getElementById('root')
    )
  })
}

但是，我仍然不明白热重新加载示例是如何工作的？