React Redux 是在 React 应用中管理数据流的工具。但是，当我们在开发一个 React 应用时，经常会遇到热更新的问题。即在开发时，当我们修改了代码后，React 应用不能自动地更新页面而需要手动刷新浏览器。这让开发体验变得很差，因为我们需要不停地手动刷新浏览器来查看代码变化的结果。因此，如何使用 React Redux 处理热更新的问题是很重要的。
热更新的原理
在讨论解决方案之前，我们要先了解一下热更新的原理。React 应用的热更新是通过 webpack-dev-server 来实现的。webpack-dev-server 可以监听文件的变化，并实时地重新打包项目。这样，我们在代码修改后，webpack-dev-server 会自动重新打包项目，并通知浏览器更新页面。webpack-dev-server 会使用一个叫做 HMR（Hot Module Replacement）的技术来实现热更新。HMR 可以使得浏览器不刷新页面就可以加载新的代码。因此，我们要解决热更新的问题，我们需要让 React Redux 应用支持 HMR。
使用 React Redux 处理热更新的问题的第一步：在 webpack 配置中开启 HMR
首先，在 webpack 的配置中必须开启 HMR。我们可以在 webpack.config.js 中添加一下代码：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
------ -----------
------- -
----- -------
--------- ------------
--
-------- --------------------
---------- -
------------ ---------
---- -----
--
-------- -
--- -------------------------------------
--
--在这里，我们使用了 webpack-dev-server，并开启了 HMR。我们通过 HotModuleReplacementPlugin 插件来启用 HMR。这是使用 HMR 的第一步。
使用 React Redux 处理热更新的问题的第二步：在 Redux 中处理热更新
在第一步中，我们已经完成了 webpack 的配置，现在我们需要在 Redux 中处理热更新。由于 Redux 的状态是单一的，并把它们转化为视图，我们需要在热更新时保留这些状态。当我们修改了代码后，Redux 的状态也会发生改变。因此，我们要想支持热更新，就需要让 Redux 在重启时重新加载状态。
我们可以使用 redux-presist 来实现这个目的。redux-presist 可以把 Redux 的状态存储到本地，并在应用重新加载时恢复这些状态。
-- -------------------- ---- -------
-- -----------------
------ - ----------- - ---- --------
------ - ------------- -------------- - ---- ----------------
------ ------- ---- ----------------------------
------ ----------- ---- -------------
----- ------------- - -
---- -------
--------
--
----- ---------------- - ----------------------------- -------------
------ ------- -------- -- -
----- ----- - ------------
-----------------
-----------------------
--
----- --------- - --------------------
------ - ------ --------- --
-在这里，我们把 rootReducer 和 presistConfig 传递给 persistReducer。persistReducer 返回值是一个经过 persistedReducer 处理过的 reducer。然后，我们用这个 reducer 创建了一个新的 store。
使用 React Redux 处理热更新的问题的第三步：在 React 中处理热更新
现在我们把热更新处理好了，现在需要在 React 中使用它。我们可以在组件中避免使用外部状态，并在组件中管理内部状态。这样，当我们改变了组件代码时，HMR 会更新组件，而组件的状态也会被保留。
但是，如果我们的 Redux 状态在组件之间共享，那么这个解决方案就无效了。在这种情况下，我们可以使用 react-hot-loader。
npm install react-hot-loader --save-dev
然后在 index.js 中使用它：
-- -------------------- ---- -------
-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ------------ - ---- -------------------
------ -------------- ---- -------------------
------ --- ---- -------------------
----- - ------ --------- - - -----------------
----------------
--------- --------------
--------------
---- --
---------------
------------
--------------------------------
--
-- ------------ -
------------------------------------- -- -- -
----- ------- - ------------------------------------
----------------
--------- --------------
--------------
-------- --
---------------
------------
--------------------------------
--
---
-在这里，我们使用了 AppContainer 来渲染我们的 App 组件。AppContainer 支持 HMR，并管理 React 组件的状态。我们在导出 App 组件时，使用了 react-hot-loader。这样，当我们修改了组件代码时，HMR 会重新渲染 AppContainer 组件，并保留组件内部的状态。这是使用 HMR 的第三步。
总结
在本文中，我们学习了如何使用 React Redux 处理热更新的问题。我们了解了 HMR 的基本原理，并介绍了如何在 webpack 和 Redux 中支持它。此外，对于 React 组件的热更新，我们使用了 react-hot-loader 来处理它。当然，这只是处理热更新的一种方法。希望本文可以对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c32f948841e9894a86dd4