前言
随着前端应用的复杂度增加，我们需要更好的状态管理解决方案，Redux 就因其简洁、可预测和可维护而成为了很多前端应用的首选。而在使用 Redux 的过程中，我们也经常需要进行异步操作，这时候的解决方案一般是使用中间件来处理异步流程。
而 Redux Fetch Dispatch 正是一个基于 Redux 中间件的 npm 包，它能够简化 Redux 异步 Action 的创建和使用，使用它可以使你更加迅速和简单地编写你的异步逻辑。
本文将为你详细介绍 Redux Fetch Dispatch 的使用，包括安装和配置、基本使用和高级用法等。
安装和配置
Redux Fetch Dispatch 可以通过 NPM 安装，只需在终端中运行以下命令即可：
npm install redux-fetch-dispatch --save
安装完成后，在 Redux 应用中配置中间件即可开始使用。
基本配置代码如下：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ ----------------------- ---- ----------------------- ------ -------- ---- ------------- ----- ----- - ------------ --------- ---------------------- ------------------------ --
在上述代码中，我们通过 applyMiddleware 函数来同时使用 redux-thunk 中间件和 redux-fetch-dispatch 中间件。
基本使用
发起请求
使用 Redux Fetch Dispatch 发起请求非常简单。你只需要在创建 action 时指定一些参数，即可实现完整的异步请求流程。
下面是一个发送 GET 请求的简单示例：
-- -------------------- ---- -------
------ ----------- ---- -----------------------
----- ------- - -- -- -
------ -------------
---- ---------------------------------------------------
------- ------
------ -
-------- -------------------
-------- -------------------
-------- -------------------
--
-------- -
-------- -
--------------- -------------------
--
--
---
--
------ ------- --------上述代码中，我们通过 fetchHelper 函数创建了一个 GET 请求，它包含了请求 URL、请求方法、请求类型、处理请求结果的 Action 类型以及请求的一些其他参数。
处理请求结果
由于 Redux Fetch Dispatch 是一个 Redux 中间件，因此你可以在你的 Redux Reducer 中使用它填充你的 Redux Store。同时，在处理异步结果时，它通过 Redux 的 Action 类型返回结果，这也使得我们的代码更为简单。
下面是一个处理请求结果的示例：
-- -------------------- ---- -------
------ - ----------------- ----------------- ---------------- - ---- -------------------
----- ------------ - ---
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- -----------------
------ -
---------
---------- -----
--
---- -----------------
------ -
---------
---------- ------
----- --------------------
--
---- -----------------
------ -
---------
---------- ------
------ ---------------------
--
--------
------ ------
-
--
------ ------- ------------在上述代码中，我们定义了一个 React Reducer 来处理 GET 请求的结果。它根据用户请求的不同状态类型来更新应用状态，并返回一个新的状态值。
异常处理
异常情况在网络请求中很常见，因此我们必须考虑如何在 Redux Fetch Dispatch 中优雅地处理它们。
当发生错误时，Redux Fetch Dispatch 会自动将错误信息传递给错误处理 Action。下面是一个处理异常的简单示例：
-- -------------------- ---- -------
------ - ----------------- ----------------- ---------------- - ---- -------------------
----- ------------ - ---
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- -----------------
------ -
---------
---------- -----
--
---- -----------------
------ -
---------
---------- ------
----- --------------------
--
---- -----------------
------ -
---------
---------- ------
------ ---------------------
--
--------
------ ------
-
--
------ ------- ------------在上述代码中，在请求失败条件下 GET_POST_FAILURE 操作将更新应用的状态，告知用户请求失败，并保存错误信息。
高级用法
Redux Fetch Dispatch 支持更多复杂、高级的请求类型，包括 POST、PATCH、PUT、DELETE，以及操作成功和操作失败条件的处理。
发布 POST 请求
下面是一个发布 POST 请求的示例：
-- -------------------- ---- -------
------ ----------- ---- -----------------------
----- ------- - ------ -- -
------ -------------
---- ----------------------------------------------
------- -------
-------- -
----- ---------------------
-------- -
--------------- -------------------
--
--
------ -
-------- -------------------
-------- -------------------
-------- -------------------
--
---
--
------ ------- --------发布 PUT 请求
您可以按照完全相同的方式发布 PUT 请求。
下面是一个发布 PUT 请求的示例：
-- -------------------- ---- -------
------ ----------- ---- -----------------------
----- ---------- - ---- ----- -- -
------ -------------
---- ---------------------------------------------------
------- ------
-------- -
----- ---------------------
-------- -
--------------- -------------------
--
--
------ -
-------- ----------------------
-------- ----------------------
-------- ----------------------
--
---
--
------ ------- -----------处理成功和失败条件
除了 POST、PUT 和 DELETE 请求之外，您还可以在成功和错误操作条件中定义 Action 类型。
下面是一个处理操作成功和失败条件的示例：
-- -------------------- ---- -------
------ ----------- ---- -----------------------
----- ------- - -- -- -
------ -------------
---- ---------------------------------------------------
------- ------
------ -
-------- -------------------
-------- -------------------
-------- -------------------
--
----------- ----- -- -
-- ----------- -- ---------------- -
------ ------
-
------ -----
--
---
--
------ ------- --------为了处理异步行为，我们在上述代码中添加了 shouldLoad 函数。这个函数将基于应用状态来决定是否重新加载数据。
总结
Redux Fetch Dispatch 是一个优秀的 NPM 包，它简化并优化了我们编写 Redux 的异步代码的过程。除了支持 GET 请求，还可以轻松支持 POST、PUT 和 DELETE 请求，并且易于处理成功和失败条件。
在下一次开发前，将 Redux Fetch Dispatch 加入您的应用程序可能是一个不错的选择！
示例代码
您可以在下面的代码片段中找到此教程中使用的完整示例代码，希望对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8caa