Redux中的热模块更换

本文概述

运行示例
热模块更换
本示例中的功能
在五分钟内设置HMR
故障排除

这是Redux应用程序中热模块更换(或HMR)的最小示例。可用的演示代码托管在GitHub上。我们仅包含支持HMR所必需的那些设置, 从而使你轻松在自己的Redux应用程序中应用HMR。

如果你迫不及待要申请HMR, 请跳至本节, 在五分钟内为你的项目设置HMR！

运行示例

首先弄脏你的手！在运行命令以启动此示例应用程序之前, 请确保在计算机上正确安装了Git, Node.js和Yarn。

$ git clone https://github.com/Front-end-io/articles.git
$ cd articles && git checkout redux-hmr
$ yarn install
$ yarn start

然后访问http：// localhost：3000 /以查看它是否有效。

编写代码后, 热模块更换无需完全刷新即可更新页面。更重要的是, 在其他资源已更新到位的同时, Redux状态得以保留。

热模块更换

热模块更换是Webpack提供的最有用的功能之一。它允许在运行时更新所有模块, 包括JSON, CSS和JS文件, 而无需完全刷新。

这是内部的工作方式：

该应用程序要求HMR运行时检查更新。
运行时异步下载更新并通知应用程序。
然后, 应用程序要求运行时应用更新。
运行时将同步应用更新。

开发Redux应用程序时, HMR可以提高生产率。 Redux是JavaScript应用程序的可预测状态容器。这是一个非常流行的基于React的最新框架。根据Redux的第一个原理的定义, Redux是一个单一的共享数据存储, 其文档将其描述为”单一事实来源”。数据存储(由reducers更新的普通JavaScript对象)将随着用户在应用程序上的操作而更新。每个用户操作, 例如单击按钮, 加载后端数据等, 都可能会多次更新存储。如果仅在特定状态快照下发生错误, 修复错误就不容易了。

HMR允许我们更新页面而无需重新初始化全局存储。在Redux开发期间, 我们可能要经过一系列操作来检查商店。一个非常常见的情况是, 只有在我们向商店添加了特定(可能是复杂的)商品后, 才会出现错误。没有HMR, 我们必须执行以下步骤：

修改可能导致该错误的代码。
刷新页面, 将特定项目添加到商店。
如果错误仍然存在, 请重复步骤1。

如果难以发现错误, 将一次又一次重复上述迭代。在现实世界中, 该错误可能仅在进行更多操作后才会出现。 HMR帮助我们编译和应用修改后的代码, 同时保持当前存储值不变。我们不需要重复步骤2。它可以提高开发效率。

注意：在某些情况下, 代码修改可能会影响当前存储值。在这种情况下, HMR将警告你重新加载整个页面。

本示例中的功能

我们只想演示HMR功能, 就希望使该功能保持最小。因此, 在此应用程序中, 我们没有在React应用程序中合并通用功能, 包括redux-logger, react-router-redux, redux-thunk, redux-devtools等。同时, 我们仅保留一个reducer, 两个action和1页。

我们的应用程序仅在商店中保留计数器值。我们只有一页称为home的页面, 其中显示计数器值和两个用于增加/减小计数器值的按钮。

要确认HMR是否有效, 只需多次增加/减少计数器, 然后在src / js / components / home.js处修改一些代码即可。例如, 在商店中将标题”计数器”修改为”计数器”。然后我们会发现：

该页面未刷新。
显示的计数器值未更改。
标题已更改为商店中的柜台。

在五分钟内设置HMR

要设置HMR, 请按照下列步骤操作。

基本图书馆

必须安装以下库以支持HMR：

[电子邮件保护] ^ 4.2.0：实时编译和更新React应用程序。
[电子邮件保护] ^ 3.1.4：提供Webpack应用。根据更改更新浏览器。

ES6

如果你使用的是ECMAScript6(如今不是谁), 则需要更多工具来实时编译ES6。首先, 这是最小的ES6配置文件.babelrc：

{
  "env": {
    "development": {
      "presets": [
        "react-hmre"
      ]
    }
  }
}

为了支持实时编译, 需要以下库：

[电子邮件保护] ^ 1.1.1

Webpack.config.js

我们需要在Webpack配置文件webpack.config.js中配置HMR。

首先, 在”插件”部分中启用HMR插件：

"plugins": [
  …  
  new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin(), ]

HMR插件生成清单(Manifest), 列出更新模块的JSON文件, 以及更新(Update), 包含要应用的数据的JSON文件。需要注意的是, HMR是Webpack提供的一个选项。实现HMR接口的诸如样式加载器之类的加载器会通过HMR接收更新, 然后用新代码替换旧代码。

如果使用webpack-dev-server, 则需要在devServer部分中打开hot标志：

"devServer": [
   ...
  hot: true, ]

热装Redux Reducer

从Redux版本2.0.0开始, reducer不会隐式热加载, 因为隐式热重新加载会引起一些问题。如果在热更新时将Redux状态重置为初始值, 请尝试为reducer启用热更新：

import { createStore } from 'redux';
import rootReducer from '../reducers/index';

export default function configureStore(initialState) {
  const store = createStore(rootReducer, initialState);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers/index');
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
}

高级设置

有关HMR的更高级设置, 请参考HMR API。

运行

最后, 请使用以下命令运行该应用程序：

$ ./node_modules/.bin/webpack-dashboard -- webpack-dev-server

故障排除

HMR根本不应用更改

HMR可能会在无任何警告的情况下静默失败。当你更新代码并保存时, 页面根本不会更新。这可能是因为你的系统不允许你观看如此多的文件更改。

在Ubuntu上, 你可以运行sysctl -a | grep inotify查看当前user.max_inotify_watches值。尝试通过运行以下命令增加该数目：sudo sysctl fs.inotify.max_user_watches = 524288。或者, 在文件sudo vim /etc/sysctl.conf中追加新行fs.inotify.max_user_watches = 524288, 然后运行sudo sysctl -p /etc/sysctl.conf来应用更改。