Question

我的index.jsx中有以下内容：

const store = configureStore();
const MOUNT_NODE = document.getElementById('root');

const render = () => {
  ReactDOM.render(
    <Provider store={store}>
      <Routes />
    </Provider>,
    MOUNT_NODE,
  );
};

if (module.hot) {
  module.hot.accept('routes.jsx', () => {
    ReactDOM.unmountComponentAtNode(MOUNT_NODE);
    render();
  });
}
render();

这将呈现初始应用程序。现在，当我更改任何文件时，都会在浏览器的控制台中获得以下日志。

[HMR] bundle rebuilding
[HMR] bundle rebuilt in 285ms
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./src/js/components/SomeComponent/SomeComponent.jsx
[HMR]  - ./src/js/components/App.jsx
[HMR]  - ./src/js/routes.jsx
[HMR] App is up to date.

此日志表明已检测到更新，并且模块已更新。另外，我在“网络”选项卡中看到已加载新脚本，并且<head>标记闪烁表示已加载新脚本。我检查了脚本，它包含我的更改。

但是，我没有看到我的页面更新。整个页面会快速闪烁，以显示调用了render()函数，但是不存在更改。

我正在使用https://github.com/react-boilerplate/react-boilerplate中的大多数HMR和Webpack设置。

我对在哪里寻找发生的事情感到困惑。任何帮助表示赞赏。

编辑：

我刚刚发现module.hot.accept()在第一次更新中只被调用了一次。我第二次更改文件时没有调用它。

编辑2：

当我尝试使用module.hot.accept（（）=> {}）时，它似乎可以工作，但是减速器却无法工作，并且出现了这个错误：

提供程序不支持动态更改store。您最有可能看到此错误，因为您已更新到Redux 2.x和React Redux 2.x，它们不再自动热重装减速器。有关迁移说明，请参见https://github.com/reactjs/react-redux/releases/tag/v2.0.0。

因此，我对此无能为力的唯一方法是让两个module.hot.accept与App.jsx在一起，另一个与reducers.jsx在一起。仍然无法弄清楚到底是什么问题。

Answer 1

我遇到了同样的问题

对于将来的任何人，您都尝试过吗？

//My root component (that also use redux), but can be any component one by one in case you want to specific compontents with hot reload


import {hot} from "react-hot-loader/root"
import React, { Component } from 'react';
import { BrowserRouter as Router } from 'react-router-dom'
import { Provider } from "react-redux"
import { ExtReact } from '@sencha/ext-react' 

import store from "./redux/store"
import Layout from './Layout';

// Enable responsiveConfig app-wide. You can remove this if you don't plan to build a responsive UI.

/**
 * The main application view
 */



class App extends Component {
  render() {
    return (
      <Router>
        <Provider store={store}>
          <Layout />
        </Provider>
      </Router>
    );
  }
}

export default hot(App);

即使检测到更新，React HMR也不会呈现

1 个答案: