本文章将介绍如何使用 @pierrebleroux/redux-api-middleware 这个 npm 包来管理 Redux 应用的异步网络请求,本文章旨在为前端开发者提供详细的学习、指导和示例代码。
什么是 Redux API Middleware
@pierrebleroux/redux-api-middleware 是一个针对 Redux 应用的 API 中间件。它可以帮助前端开发者更加简单地管理应用的网络请求,包含了易于使用的 action creators,用于发送与处理网络请求数据。
如何使用 Redux API Middleware
安装
首先,需要使用 npm 或者 yarn 来安装 redux-api-middleware (推荐使用 yarn)。
---- --- -----------------------------------
初始化
在创建 store 时,需要将 apiMiddleware 作为参数传递给 applyMiddleware 函数,并包装 createStore 的调用:
------ - ------------ --------------- - ---- -------- ------ ------------- ---- -------------------------------------- ------ - ----------- - ---- ------------- ----- ----- - ------------------------ --------------------------------
创建 Action Creators
在开始使用 redux-api-middleware 之前,需要准备 action creators ,这些 action creators 用于触发 API 请求并更新 store。
这里的 action creators 主要分为 3 类:
- 发起请求
- 处理成功的响应
- 处理失败的响应
例如:
------ - ---- - ---- ---------------------- ------ ----- --------- - -- -- -- ------- - --------- -------------------- ------- ----- ---------- ------ - ---------- -- ---- - ----- ---------- -- ---- -------- -------- ------ ---- -- - ------ -------------------- -- - ------ ---------- ----- -- -- -- - ----- ---------- -- ---- -------- -------- ------ ---- -- - ------ ------------------- -- - ------ ------- ------------ -- -- -- -- -- ---
这个 action creator 返回一个对象,这个对象非常重要,其中包含了一个 RSAA (Redux Standard Api-calling Action) 标识,用于指定请求的处理方式,同时也包含了 endpoint、method 和 types 等信息。
发送 Action
现在已经定义好了 action creator,我们可以通过调用 dispatch(fetchData())
来发送 action。
---------------------------
成功响应的数据将会被层层处理,最后被存入 store 对象的 response 属性中。失败的响应数据将被存入 store 对象的 error 属性中。
使用 Response Data
如果一个请求已经成功处理,并将响应数据存入 store 中,应用的其他部分就可以访问这些数据。Redux 规范要求,将数据通过组合 reducer 的方式来存储,因此可以从 store 中获取相应的数据。
例如:
----- --------------- - ------- -- -- ----- -------------------- --
Redux API Middleware 的高级用法
除了最基本的用法之外, redux-api-middleware 还支持一些具有高级功能的特性,例如:错误回退,重试以及缓存等。
------ - ----- --------- - ---- ----------------------- ------ ----- --------- - -- -- -- ------- - --------- ------------ ------- ------ ------ - ---------- - ----- ---------- -------- -------- ------ ---- -- - ------ -------------------- -- - ------ - --------- ---- -- --- -- -- - ----- ---------- ----- -------- ------ ---- -- - -------------------- ------- ------ ----- ------ - ------- ----------- ----------- -------------- -- -- -------- -------- ------ ---- -- - ------ -------------------- -- - ------ - --------- ---- -- --- -- -- -- -- --- -- ------------- ------ - --------- - ---- ----------------------- ------ ----- --------------- - -- -- ---- -- ------ -- - -- ------------ --- ---------- - ----------------------- -------- -------- - ------------- --
这个示例包含了错误回退的机制。当请求失败时,该示例将 log 输出错误状态码。使用方法与基础用法相同,不同之处在于 'FAILURE' 类型的元数据将输出 log。
总结
Redux API Middleware 是一个优秀的 Redux 中间件包,可用于管理网络请求。在本文中,我们介绍了如何使用它来简化应用程序中的异步请求,以及高级用法。通过使用 Redux API Middleware,我们可以更加精确地管理我们应用中的异步操作。
参考
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005587f81e8991b448d5c1e