在前端开发中，我们经常需要使用异步请求来从服务器获取数据。而 redux-async-request 便是一个用于简化异步请求的 npm 包。本文将详细介绍如何使用 redux-async-request。
安装
首先，需要安装 redux-async-request，可以使用 npm 或者 yarn 进行安装：
npm install redux-async-request --save
或者
yarn add redux-async-request
使用
redux-async-request 用于简化异步请求。它通过内置的 middleware 来处理异步请求，和 redux-thunk 类似。不同的是，redux-async-request 处理异步请求的方式更加规范化，代码可读性更高。
使用 redux-async-request 的基本步骤如下：
- 安装 redux-async-request
- 创建一个 redux store，并使用 redux-async-request middleware
- 在 reducer 中处理异步请求
- 在组件中使用 action 来触发异步请求
接下来，我们通过一个示例来演示使用 redux-async-request 的具体步骤。
示例
在这个示例中，我们将创建一个简单的 todo 应用程序来演示如何使用 redux-async-request。todo 应用程序有一个任务列表，可以添加和删除任务。
创建 store
首先，我们需要创建一个 redux store，并将 redux-async-request middleware 使用到 store 中。创建 store 的代码如下：
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ - ---------------- - ---- ---------------------- ------ ----------- ---- ------------------ ----- ---------- - ------------------- ----- -------- - ----------------- ----- ------------ --- ----- ----- - --------------------- -----------------------------
在上述代码中，我们首先导入所需的 redux 方法和函数，然后导入 todoReducer，这里我们假定 todoReducer 已经实现。接下来，我们创建一个 redux-async-request middleware 实例，最后创建 store 并应用 middleware。
处理异步请求
接下来，在 todoReducer 中处理异步请求，我们需要分别处理获取任务列表和添加任务两个请求，todoReducer 的代码如下：
-- -------------------- ---- -------
------ - ------------------ - ---- ----------------------
------ -
------------------
------------------
------------------
-----------------
-----------------
-----------------
- ---- ---------------------------
----- ------------ - -
---------- ------
------ ---
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------------
---- -----------------
------ - --------- ---------- ---- --
---- ------------------
------ - ------ --------------- ---------- ----- --
---- -----------------
------ - ------ ---------------- ---------------- ---------- ----- --
---- ------------------
---- -----------------
------ - --------- ---------- ------ ------ -------------- --
--------
------ ------
-
--
------ ------- ------------------------------- -
---------- ------------------- ------------------
---------- ------------------- ------------------
---------- ------------------- ------------------
---在上述代码中，我们首先导入 handleAsyncActions 函数，handleAsyncActions 用于处理异步请求的 action，返回一个可用的 reducer 函数。
接下来，我们定义 initialState 和 todoReducer。在 todoReducer 中处理 GET_TASKS_REQUEST、GET_TASKS_SUCCESS、GET_TASKS_FAILURE、ADD_TASK_REQUEST、ADD_TASK_SUCCESS 和 ADD_TASK_FAILURE 这些 action。
最后，我们使用 handleAsyncActions 函数处理 todoReducer 函数，将 GET_TASKS_REQUEST、ADD_TASK_REQUEST、GET_TASKS_SUCCESS、ADD_TASK_SUCCESS、GET_TASKS_FAILURE、ADD_TASK_FAILURE 这些 action 分别归类到 onRequest、onSuccess 和 onFailure 中。
触发异步请求
在组件中触发异步请求，首先需要导入相关 action，然后在组件中进行调用。在我们的例子中，我们需要导入 getTasks 和 addTask 两个 action，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - --------- ------- - ---- ------------------
----- ---- - -- ------ ---------- ------ -------- -- -- -
----- ------------ - ------- -- -
-----------------------
----- ---- - -------------
----- ----- - -----------------------------------------
----- ---- - -------------------
-- ------ -
------------------------
----------- - ---
-
--
------ -
-----
---------- -- ------------------
----------------- -- -
-- -----------------------------
---
------ -- -----------------------
----- ------------------------
------ ----------- --
------- --------------------------
-------
------
--
--
----- --------------- - ------- -- --
------ -----------------
---------- ---------------------
------ -----------------
---
------ ------- -------------------------------在上述代码中，我们首先导入 getTasks 和 addTask 两个 action，然后在 handleSubmit 函数中调用 addTask。在 Todo 组件中，我们首先读取 store 中的 tasks、isLoading 和 error。然后展示所有的任务，并提供添加任务的表单。
至此，我们完成了使用 redux-async-request 的 todo 应用程序。有了 redux-async-request，我们可以更加轻松地处理异步请求，代码可读性更高，开发效率更高。
总结
redux-async-request 为我们提供了一种规范化的处理异步请求的方式，可以让我们更轻松地处理异步请求。在本文中，我们通过一个实际的示例演示了如何使用 redux-async-request，希望读者能够掌握如何使用这个 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d8b81e8991b448db4bb