Redux中的热模块更换

本文概述

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

【Redux中的热模块更换】这是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来应用更改。