简介
redux-request-state是一个可编程的redux中间件和React高阶组件，它可以使我们在React项目中更加容易地处理异步请求和请求状态。
redux-request-state拥有以下特点：
- 简洁方便：内置请求状态管理、缓存、取消等功能，可以快速搭建一个可靠的异步请求系统。
- 灵活可配置：可以自由配置请求参数、请求方式、请求头等，支持定制缓存存储策略和状态管理器。
- 兼容性强：兼容React和Redux的所有版本，同时支持react-redux和redux-toolkit
- 生态丰富：附带了详细的文档和示例，可以快速入门，并且有大量的拓展库可以实现更多高级特性。
安装和使用
npm install --save redux-request-state
import 并使用:
-- -------------------- ---- ------- ------ - -------- -------- ----------- ----------- - ---- ---------------------- -- ---------------- ----- ----------- - ----------------- -- ----------- -------- -------- --- -- ------------------- ----- ----- - ------------------------ ------------------------ -- ---------- -------- ---------- - ----- - ----- -------- ------ ----------- - - --------------------- -- --- - -- ------ ----- -------- ------- --------------- - -- --- - ------ ------- --------------------------------
下面我们将详细介绍redux-request-state各个模块的具体使用方法。
模块详解
reducer
redux-request-state中间件启用后，相关的请求状态将会被存储在Redux的状态树中。需要在Redux中添加reducers：
import { reducer } from 'redux-request-state';
const rootReducer = combineReducers({
request: reducer,
// 其他的reducers
});actions
redux-request-state包含一些内置的action creator，用于更新请求状态。
import { actions } from 'redux-request-state';
dispatch(actions.request('/users'));
dispatch(actions.success('/users', data));
dispatch(actions.fail('/users', error));
dispatch(actions.reset('/users'));- request(type: string, payload: any) 发起一个请求
- success(type: string, payload: any) 请求成功返回
- fail(type: string, payload: any) 请求失败
- reset(type: string) 重置状态
useRequest
useRequest 是一个React hook，用于在组件中发起异步请求。
使用方法：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------------
-------- ---------- -
----- - ----- -------- ------ ----------- - - ---------------------
-- ------- -
------ ---------------------------
-
-- -------- -- ------ -
------ ----------------------
-
------ -
----
-------------- -- -
--- ------------------------------
---
-----
--
-hook返回的对象具有以下属性：
data: 请求成功后的数据，等效于getState().request[type].dataloading: 当前请求是否正在进行中，等效于getState().request[type].loadingerror: 请求失败的错误对象，等效于getState().request[type].errorsendRequest: 发送异步请求的函数，该函数有以下参数：
sendRequest(requestConfig: object, options: object)
第一个参数称为 requestConfig。它应该是一个符合 axios 请求配置的对象。例如：
sendRequest({ method: 'get', url: '/users' });
sendRequest({ method: 'post', url: '/users', data: { name: 'Tom' } });第二个参数称为 options。它是一个包含以下属性的对象：
sendOnMount: 默认为false。如果设置为true，则在组件挂载时自动发送请求。cacheTime: 缓存失效时间（单位为秒）。默认为0，不缓存，否则缓存响应结果cacheTime秒。比如，让缓存失效时间为20秒：
// options.cacheTime
sendRequest({ method: 'get', url: '/users' }, { cacheTime: 20 });withRequest
redux-request-state还提供了一个高阶组件withRequest，它将数据、请求函数和请求状态作为props传递给目标组件。使用方式：
-- -------------------- ---- -------
------ - ----------- - ---- ----------------------
----- -------- ------- --------------- -
-------- -
----- - ----- -------- ------ ----------- - - -----------
-- ------- -
------ ---------------------------
-
-- -------- -- ------ -
------ ----------------------
-
------ -
----
-------------- -- -
--- ------------------------------
---
-----
--
-
-
------ ------- --------------------------------withRequest接收一个路径参数，通过路径参数来映射到redux中间件中的状态。
例如：
// 表示状态树中 request.users 的过程。
withRequest('/users')(UserList);
withRequest('/posts')(PostList);在这种情况下，成功请求时的响应数据将存储在 getState().request.users.data 中，loading状态会存储在 getState().request.users.loading
withStatus
withStatus 是另一个高阶组件，它将请求状态作为props传递给目标组件。
使用方式：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------------
----- ------ ------- --------------- -
-------- -
----- - -------- ----- - - -----------
------ -
------- ------------------ ----------------------
------ - ------------- - ---------
---------
--
-
-
------ ------- -----------------------------------我们可以看到 Button 组件接收 loading 和 error 作为props，以便根据状态禁用或启用按钮并显示错误消息。
配置选项
除了上述Hook和高阶组件外，redux-request-state还提供了许多配置选项，可以帮助我们实现更高级的特性。我们可以通过 configure 函数更改这些选项。例如：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------------- ----------- ----------- --------------- -- ---------------------------- --------- ------------- -- ------- --------------------------------------------------- -------- ------ -- ---------------- ------------ ---------- ---- -- -------------- ----------- ----------- ---- -- ----------- ---------- ---
示例
接下来我们将通过一个实际的示例来帮助更好地理解 redux-request-state 的使用方法。
在这个例子中，我们将访问 GitHub API，并使用 useRequest 和 withRequest 显示 Github 上的用户和他们的存储库。
先通过npm安装依赖包：
npm install --save redux react-redux redux-thunk redux-request-state axios
我们需要首先创建我们的API对象：
-- -------------------- ---- ------- -- ------ ------ ----- ---- -------- ----- ------ - ------------------------- ------ ----- --------------------- - ----- -------- -- - ----- --- - ------------------------------------ ----- -------- - ----- --------------- ------ ------------- -- --- -- ------ ----- -------- - ----- -- -- - ----- --- - ------------------ ----- -------- - ----- --------------- ------ ------------- -- --- --
这个 API 将获取给定用户的存储库并获取所有 GitHub 用户。接下来是我们的 UserList 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ------- - ---- --------------
------ - --------------------- - ---- --------
------ - ------- - ---- ----------------------
----- -------- - -- ------ ------------------- -- -- -
----- ------------ - ----- ----- -- -
----- - ----- - - -------------
---------------------------
--
------ -
--
---------- - ---- -- ----- ----- ------------------
------- ------------------------
------- --------------- ---------------
--------------- -- -
------- ------------- -------------------
------------
---------
---
---------
------------------ --
---
--
--
------------------ - -
------ ------------------
-----------------
--- ----------------------------
------ ----------------------------
--
-------------
-------------------- --------------------------
--
----- --------------- - ----- -- -
------ -
------ ----------------------------
--
--
----- ------------------ - -------- -- --
-------------------- ----- -------- -- -
------------------------------------------------------
----- ------------ - ----- --------------------------------
---------------------------------------------------- ---------------
--
---
------ ------- ------------------------ ------------------------------此组件向用户显示所有 GitHub 用户，用户将选择一个用户以获取其存储库。当用户选择一个选项时，我们将触发异步Action，第一个Action将设置我们的 loading 和 error 状态，第二个Action获取数据，并将其填入状态树，组件中随后会自动重新渲染。
以下是我们的 RepositoriesTable 组件：
-- -------------------- ---- -------
------ --------- ---- -------------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ----------------- - -- ------------- -------- ------ -------- -- -- -
-- --------- -
------ ------------ ----------------------
-
-- ------- -
------ ---------------------------
-
-- --------------- -
------ ----------- - ---- ----- -- --- ----- --------------------
-
------ -
--
---------------- --- ----------------
-------
-------
----
-------------
-----------------
-----
--------
-------
---------------------------- -- -
--- --------------------
--------------------------
------------------------------
-----
---
--------
--------
---
--
--
--------------------------- - -
------------- ------------------
-----------------
--- ----------------------------
----- ----------------------------
--------- -----------------
--
--
-------- --------------------------
------ -----------------
--------- -----------------
--
----- --------------- - ----- -- -
------ -
------------- --------------------------------------------------------------
- -------------------------------------------------------------------
- -----
-------- --------------------------------------------------------------
- ----------------------------------------------------------------------
- ------
------ --------------------------------------------------------------
- --------------------------------------------------------------------
- -----
--------- ------------------------------
--
--
------ ------- --------------------------------------------该组件根据当前用户显示存储库，并显示适当的适当消息和错误消息。
接下来让我们在我们的 App 组件中使用它们：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -------------
------ - -------- ------- - ---- ----------------------
------ - ------------ ---------------- --------------- - ---- --------
------ - -------- - ---- --------------
------ ----- ---- --------------
------ ----- ---- --------
------ - --------- - ---- ----------------------
-----------
----------- ---------------
---
------------------------------------- -- -
-------------------- ------- -- ----------------
------ -------
---
----- ----------- - -----------------
-------- --------
---
----- ----- - ------------------------ ------------------------
----- --- - -- -- -
--------- --------------
--------- --
-----------
--
------ ------- ----我们启动这个应用程序，并通过选择我们的用户来查看数据的变化。
这个例子帮助我们理解了 redux-request-state的基本使用方法和架构，仅仅包含了很多 从根元素到最后一级节点固有的状态管理和props传递的过程，让我们在React项目中更加容易地处理异步请求和请求状态。
总结
本文详细地介绍了 redux-request-state 实现的基本架构和用法，并包括完整的示例代码。相信读者通过本文的阅读，可以轻松通过 redux-request-state 实现在 React 项目中的异步请求与请求状态处理。如果读者希望深入了解更多有关 redux-request-state 的内容，可以参考它的github仓库并阅读相关文档，希望读者可以在实际项目中运用所学知识，提升开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005545281e8991b448d19eb