在 Web 前端开发中，无论是构建大型应用，还是小型项目，状态管理都是非常重要且必不可少的一环。Redux 作为一个状态管理库，可长时间缓存状态，并可进行时间回溯和追踪，是前端开发者常用的状态管理工具之一。本文将深入介绍 Redux 中的异步中间件和热更新技巧，让读者更加深入了解如何在项目中使用 Redux。
异步中间件
在 Redux 中，Action 只能是一个纯数据对象，且必须同步返回结果。但是，与后端进行网络请求时，我们经常需要处理异步操作。此时，就需要在 Redux 中使用中间件来处理异步数据流。
Redux 中的中间件是对 dispatch 函数进行拦截处理的函数，可以对 Action 进行修改、暂停、忽略等操作。与 Action、Reducer 一样，Redux 的中间件同样需要遵循纯函数的原则。常用的异步中间件有 redux-thunk、redux-saga 和 redux-observable 等。
redux-thunk
redux-thunk 是 Redux 官方提供的一个中间件，它允许 Action 创造者返回一个函数，而不是一个对象，来进行异步请求。在 Action 函数中，我们可以通过 dispatch 方法手动调用异步操作，并在异步结束后再 dispatch 得到的结果。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
----- ----- - -------------------- ------------------------
----- ------------- - ---- -- -
------ ---------- -- -
---------- ----- -------------------- ---
-------------------------
--------- -- -
---------- ----- --------------------- -------- -------- ---
--
---------- -- -
---------- ----- --------------------- ------ --- ---
---
-
-上述代码中，当调用 fetchUserById 函数时，会先 dispatch 一个 FETCH_USER_REQUEST action，然后执行异步请求，并在请求结束后根据请求结果再次 dispatch FETCH_USER_SUCCESS 或 FETCH_USER_FAILURE action。这样，就可以轻松地处理异步操作并添加更多逻辑。
redux-saga
redux-saga 是一种用于管理应用程序的 side effect（译注：副作用，比如异步请求和访问浏览器缓存等操作）的 library，并通过使用 ES6 Generator 简化了异步代码的复杂度。通过在一个单独的文件中编写 sagas，可以将异步逻辑和 business logic 分离出来。
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas';
const sagaMiddleware = createSagaMiddleware();
const store = createStore(reducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);上述代码中，我们引入了 redux-saga 库，并创建了一个 sagaMiddleware 实例。通过 applyMiddleware 函数将 sagaMiddleware 应用到 store 中，在创建 rootSaga 文件中的 watcher 进行监听。
-- -------------------- ---- -------
------ - ----- ---- --------- - ---- ---------------------
------ - ------------------- ------------------- ------------------ - ---- ------------------
------ - --------- - ---- --------------
--------- --------------------- -
--- -
----- ---- - ----- --------------- -----------
----- ----- ----- ------------------- -------- ---- ---
- ----- ----- -
----- ----- ----- ------------------- ------ --- ---
-
-
--------- ---------- -
----- ----------------------------- ---------------
-
------ ------- ---------上述代码中，我们编写了 fetchUserSaga 函数，使用 call 函数调用 fetchUser 函数，该函数返回一个 promise 对象。如果调用成功，我们就通过 put 函数创建 FETCH_USER_SUCCESS action 进行返回。如果遇到错误，则导出 error 到 FETCH_USER_FAILURE action。
redux-observable
redux-observable 是一个基于 RxJS 的异步中间件，用于处理复杂的、可中断的异步时间序列，包括 Ajax 请求、WebSockets 和 SockJs 连接等。我们通过使用 Actions 和 Epics 模式，将 Redux 中的 Actions 看做数据流，从而管理 side effect。
import { createStore, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import rootEpic from './epics';
const epicMiddleware = createEpicMiddleware()
const store = createStore(reducer, applyMiddleware(epicMiddleware))
epicMiddleware.run(rootEpic)上述代码中，我们引入了 redux-observable 库，并创建一个 epicMiddleware 实例。通过 applyMiddleware 函数将 epicMiddleware 应用到 store 中，在创建 rootEpic 的文件中进行监听。
-- -------------------- ---- -------
------ - ---------- ---- ---------- - ---- -----------------
------ - ---- - ---- ------------
------ - ------ - ---- -------------------
------ - ------------------- ------------------- ------------------ - ---- ------------------
------ ----- ------------- - ------- --
-------------
---------------------------
---------------- --
-----------------------------------------
------------ -- -- ----- ------------------- -------- -------- ----
---------------- -- -- ----- ------------------- ----- ---
-
-
-
------ ------- --------------上述代码中，我们创建了一个 fetchUserEpic 函数，将 ofType 函数作为 action$ 对象的参数，并使用 switchMap 订阅 ajax 中的 JSON 值已获取异步请求结果。若请求成功，则返回 FETCH_USER_SUCCESS action，否则返回 FETCH_USER_FAILURE action。
热更新
热更新是指在不重新加载整个页面的情况下，替换页面上的某一部分，以提高应用程序的性能和用户体验。在大型单页面应用程序（SPA）中，应用热更新技术可降低页面加载时间和带宽消耗，改善用户体验。
react-hot-loader
React-Hot-Loader 是一个 Webpack 插件，它可以在不影响组件状态的情况下更新组件内容，使得我们在开发过程中可以实时的预览组件的渲染效果。同时，它还支持更新组件内的样式和 State。
npm install react-hot-loader
webpack 配置
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ------- - -------------------
----- ----------------- - -------------------------------
----- - ------------------------- - - ----------------------------------------
----- ---------------------- - ------------------------------------
-------------- - -
----- --------------
------ ------------------
------- -
--------- --------------------------
----- ----------------------- --------
----------- ----
--
------- -
------ -
-
----- ---------------
-------- ---------------
---- -
-
------- ---------------
-------- -
--------------- -----
-------- ---------------------------
-------- -
--------------------- - -------- - --------- ----- - --------- - ---
----------------------
---------------------------
--
--
--
--
--
---
--
--
-------- -
--- -------------------
--------- -------------------
---
--- -------------------------------------
--- ----------------------------
--
---------- -
------------ ---------
---- -----
--
-------- -
----------- -------- ------ ------ ---------
------ -
------------ ------------------------
--
--
--上述配置中，我们使用了-webpack 的 devServer，create-react-app 和 react-scripts 的默认配置是作为了独立的服务器运行。React-Hot-Loader 插件通过自定义 Webpack 配置来启用 React 组件的热部署功能。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -------------
----- --- - -- -- -
------ -
-----
------ --------
--------- --
------
--
--
------ ------- ----上述代码中，我们创建了一个 App 组件，其中包含一个 ItemList 组件。因为我们安装了 React-Hot-Loader 插件，所以 App 组件可以通过热更新方式更新 ItemList 组件。
redux-devtools-extension
Redux DevTools 扩展程序是一个开发工具，可用于跟踪、检查和调试 Redux 应用程序。它有多种功能，包括实时监视状态、时间旅行到以前的状态、记录操作、模拟 Action 等。
npm install redux-devtools-extension
-- -------------------- ---- -------
-- --------
------ - ------------ ---------------- ------- - ---- --------
------ ----- ---- --------------
------ - ------------------- - ---- ---------------------------
------ ----------- ---- -------------
----- ---------------- - --------------------- ------ ----- ----------- -- ---
----- ----- - ------------
------------
----------------------------------------
--
------ ------- ------
-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ --- ---- --------
------ ----- ---- ----------
----------------
--------- --------------
---- --
------------
-------------------------------
--上述代码中，我们为 createStore 提供了在应用 Redux DevTools 插件时使用的 composeEnhancers 函数。我们还从 redux-devtools-extension 库中导入了 composeWithDevTools 函数，并使用 trace 和 traceLimit 参数在扩展程序中安装了一些函数调用的跟踪逻辑。
结论
本文详细介绍了 Redux 中的异步中间件和热更新技巧，并提供了一些示例代码。在实际项目开发中，开发者可以根据实际需求来选择合适的工具和技术，以提高项目开发的效率和可维护性。通过不断学习和实践，我们可以更好地理解 Redux 应用程序中的状态管理和组件渲染。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674abafca1ce006354a21c3f