Question

我已经设法让webpack流程正常工作，浏览器正在获得热门更新。但由于某种原因，我无法理解模块的交换似乎无法正常工作......

这是我的index.js：

import { AppContainer } from 'react-hot-loader';
import React from 'react';
import ReactDOM from 'react-dom';
import { browserHistory } from 'react-router';

import { syncHistoryWithStore, routerMiddleware } from 'react-router-redux';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';

import authenticationMiddleware from './middleware/authentication.js';
import messageMiddleware from './middleware/navigationMessage.js';
import apiMiddleware from './middleware/api.js';

import AppRouter from './router.jsx';

import RootReducer from './reducers/root-reducer.js';

let store = createStore(RootReducer, applyMiddleware(thunkMiddleware, apiMiddleware, messageMiddleware, authenticationMiddleware, routerMiddleware(browserHistory)));

const history = syncHistoryWithStore(browserHistory, store);

let rootElement = document.getElementById('app-root');
const hotRender = (CurrentAppRouter) =>
  ReactDOM.render(
    <AppContainer>
      <Provider store={store}>
        <CurrentAppRouter history={history} />
      </Provider>
    </AppContainer>,
    rootElement
  );

hotRender(AppRouter);

if (module.hot) {
  module.hot.accept('./router.jsx', () => {
    hotRender(AppRouter);
  });
}

Provider.childContextTypes = {
  store: React.PropTypes.object
};

我在Chrome控制台中得到了这个：

然而html并没有更新，即使我手动来回导航也不会发生变化，只有当我手动重新加载页面时才会出现我的更改。

我做错了什么？

更新

我的依赖项：

"devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-object-rest-spread": "^6.20.2",
    "babel-plugin-transform-react-jsx": "^6.8.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-2": "^6.22.0",
    "eslint": "^3.9.1",
    "eslint-plugin-react": "^6.6.0",
    "express": "^4.13.4",
    "gulp": "^3.9.1",
    "gulp-concat-css": "^2.3.0",
    "gulp-sass": "^2.3.2",
    "json-loader": "^0.5.4",
    "react-hot-loader": "^3.0.0-beta.6",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  },
  "dependencies": {
    "babel-polyfill": "^6.16.0",
    "babel-runtime": "^6.18.0",
    "es6-promise": "^4.0.5",
    "isomorphic-fetch": "^2.2.1",
    "jwt-decode": "^2.1.0",
    "mobile-detect": "^1.3.3",
    "raven": "^1.1.1",
    "raven-js": "^3.9.1",
    "react": "^15.4.2",
    "react-bootstrap": "^0.30.6",
    "react-dom": "^15.4.2",
    "react-icons": "^2.2.1",
    "react-redux": "^4.4.5",
    "react-router": "^3.0.0",
    "react-router-bootstrap": "^0.23.1",
    "react-router-redux": "^4.0.7",
    "redux": "^3.6.0",
    "redux-thunk": "^2.1.0",
    "whatwg-fetch": "^2.0.1"
  }

Answer 1

虽然我远不是反应热门加载器的专家，但我能够通过以下示例here和here来实现它。

我的代码看起来像这样。

import Root from './containers/Root';
// Root has the <Provider><Router>...</Router></Provider> components

render(
  <AppContainer>
    <Root store={store} history={history}/>
  </AppContainer>,
  document.getElementById('app')
);

if (module.hot) {
  module.hot.accept('./containers/Root', () => {
    const Root = require('./containers/Root').default;
    render(
      <AppContainer>
        <Root store={store} history={history}/>
      </AppContainer>,
      document.getElementById('app')
    );
  });
}

与您的代码进行比较，最大的区别似乎是，只要触发热重新加载，我就会重新require根组件。我也在配置反应路由器上面的一层热重新加载。

我收到了同样的反应路由器警告，显示在你的控制台中，目前我只是忽略它;我的应用程序其余部分的热负载正在运行。

Answer 2

将您的module.accept代码更改为

let render = () => {
    ReactDOM.render(
     <AppContainer>
       <Provider store={store}>
          <CurrentAppRouter history={history} />
       </Provider>
      </AppContainer>,
      rootElement
    )
} 

module.hot.accept('./router.jsx', () =>
  setImmediate(() => {
    ReactDOM.unmountComponentAtNode(rootElement)
    render()
  })
)

React-hot-loader几乎正常工作，我做错了什么？

2 个答案: