模块无法热更新

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

当我尝试修改任何反应组件时发生错误。这些更新来自routes/index路径。但我不明白为什么react-redux-universal-hot-example，我已经采取了思想，有效，而我的不是？

我可以看到，在热门示例中，只有'reducer'路径有一个hot.accept，所以我不太明白如何重新加载反应组件，但他们只是......

如何调试任何建议或想法？

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')
    )
  })
}

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