在前端应用开发中，我们经常需要处理异步请求或者耗时操作的 Loading 状态，以便优化用户体验和提供更好的交互反馈。Redux 作为一种流行的状态管理工具，也需要考虑如何处理 Loading 状态，本文将会详细探讨如何在 Redux 中实现 Loading 状态的显示。
为什么需要 Loading 状态？
Loading 状态是指在数据加载或者操作执行过程中，应用显示的反馈状态，旨在告知用户应用正在进行任务，尽可能地缩短等待时间和提升用户的使用体验。比如，当用户提交一个表单时，我们需要显示 Loading 状态，以防止用户多次点击导致数据混乱。
在前端应用中，通常使用 Redux 来进行状态管理，因此需要在 Redux 中处理 Loading 状态，以便在数据 loading 的过程中，UI 界面能够很好的响应。
在 Redux 中处理 Loading 状态
在 Redux 中处理 Loading 状态，主要有两种方式：一种是使用 action 进行控制，另一种是使用中间件进行拦截。
采用 action 的方式
在 Redux 中，我们可以使用 action 的方式来处理 loading 状态，当一个异步操作开始的时候，派发一个类型为 START_LOADING 的 action，当异步操作结束的时候，派发一个类型为 STOP_LOADING 的 action，以告知应用当前操作的状态。
假设有一个异步请求，我们可以编写以下的 actionCreator 和 reducer 函数：
-- -------------------- ---- -------
----- ------------ - ---------------
----- ------------ - ---------------
----- ------------ - -- -- -- ----- --------------- ---
----- ----------- - -- -- -- ----- -------------- ---
----- ----------- - -- -- --
----- -------------
---
----- ----------- - ------ -- --
----- -------------
-----
---
----- ------- - ------ - - ---------- ----- -- ------- -- -
------ ------------- -
---- ----------------
------ -
---------
---------- -----
--
---- ---------------
------ -
---------
---------- ------
--
---- -------------
------ ------
---- -------------
------ -
---------
----- ------------
--
--------
------ ------
-
--在上述例子中，我们可以看到 startLoading 和 stopLoading 函数，它们分别对应操作开始和结束之后的 action。我们还定义了 REQUEST_DATA 和 RECEIVE_DATA 两个 action type，以便处理数据请求和数据接收的过程。在 reducer 函数中，我们通过 isLoading 属性来标识当前状态是否为 Loading 状态。
采用中间件的方式
除了使用 action 的方式，我们还可以通过 Redux 中间件来拦截异步请求，并控制 Loading 状态的显示。比如，我们可以使用 promiseMiddleware 中间件来拦截异步请求，并在请求执行的过程中显示 Loading 状态。
import { applyMiddleware, createStore } from 'redux';
import promiseMiddleware from 'redux-promise-middleware';
import reducer from './reducer';
const store = createStore(reducer, applyMiddleware(promiseMiddleware));
在上述代码中，我们使用 promiseMiddleware 中间件对异步请求进行拦截，并且使用 applyMiddlewares 函数将它添加到 createStore 函数中。
使用中间件的方式更为简洁，也更为常见，因此在实际应用中，建议使用中间件的方式来管理 Loading 状态。
总结
在本文中，我们分别从 action 和中间件两个方向探讨了如何在 Redux 中处理 Loading 状态的显示问题。无论采用哪种方式，都需要我们明确应用的加载状态，以便给用户反馈和掌握应用的状态。希望本文能够对大家理解 Redux 中 Loading 状态的处理带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eb1e02f6b2d6eab35c5b9c