redux-fetchy-middleware 是一个基于 Redux 的中间件，用于管理异步请求和响应的状态。使用这个 npm 包可以很方便地将 Redux 和 Fetch API 相结合，并通过 Promises 管理网络请求的状态。
本文将会介绍如何在 React 项目中使用 redux-fetchy-middleware。
安装
使用 npm 或者 yarn 安装 redux-fetchy-middleware：
--- ------- ----------------------- ------ ---- --- -----------------------
配置
将 redux-fetchy-middleware 加入 Redux store 的 middleware 中：
------ - ------------ --------------- - ---- -------- ------ ---------------- ---- -------------------------- ------ ----------- ---- ------------- ----- ----- - ------------------------ -----------------------------------
redux-fetchy-middleware 支持以下配置属性：
- beforeFetch - 发送请求之前的回调函数
- afterFetch - 请求完成后的回调函数
- fetchyProp - 配置用于存储请求状态的 Redux prop 名称，默认为 "fetchy"
- payloadProp - 配置要发送到服务器的数据的 Redux prop 名称，默认为 "payload"
- actionProp - 配置可以用于发送请求的 Redux prop 名称，默认为 "fetchyAction"
示例配置：
------ ---------------- ---- -------------------------- ----- ------ - - ------------ -------- ------ -- --- ----------- -------- ------ -- --- ----------- ----------- ------------ ------------ ----------- ---------------- -- ------------------------------------------
发送请求
在 Redux action 中包含以下信息即可完成数据请求：
- type - Redux action 的类型
- payload - 发送到服务器的数据
- url - 目标 URL
- method - HTTP 请求方法
- onSuccess - 成功响应的操作
- onFailure - 失败响应的操作
示例如下：
------ ----- --------- - -------- -- --
----- -----------
-------- - ------ --
---- ------------
------- ------
---------- ---------- --------- -- -
---------- ----- ------------------- -------- - ----- ------------- - ---
--
---------- ------- --------- -- -
---------- ----- ------------------- ----- ---
--
---监听状态
使用 useSelector 提取状态，可以在组件中监视请求状态。
------ - ----------- - ---- --------------
----- ----------- - -- ------ -- -- -
----- ---- - ------------------- -- ------------
------ -
-----
---------------- -- ------------------
----------- -- --------------------
---------- -- -
-----
-----------------------
------------------------
------
--
------
--
--结论
使用 redux-fetchy-middleware，可以方便地跟踪网络请求状态并在 Redux store 中处理。为 React 应用程序添加这个 npm 包，可以更好地组织所有异步请求，并将其与 Redux 状态管理器结合起来，使应用程序运行更高效。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006700de361a36e0bce8cba