npm 包 redux-promise-procedures 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

Redux 是一种非常流行的前端状态管理工具，但处理异步函数还是比较麻烦的。redux-promise-procedures 是一个彻底解决异步 redux action 函数的库，它可以简化 redux 异步操作，并让您的代码更具有模块化和重用性。

在本篇文章中，我们将介绍如何安装和使用 redux-promise-procedures，以及说明它如何工作和为什么可以使您的代码高效和易于维护。

安装

首先我们需要安装 redux-promise-procedures。在项目中使用以下命令安装：

npm install redux-promise-procedures

基本用法

让我们来看看如何使用 redux-promise-procedures：

Step 1：创建过程

redux-promise-procedures 希望所有的异步函数都被描述为一个过程。使用 redux-promise-procedures，你可以创建一个过程：

import { createProcedure } from "redux-promise-procedures";

const getUsers = createProcedure({
  type: "USERS_FETCH",
  payload: {
    url: "https://myapi.com/users"
  }
});

createProcedure 方法接收一个对象作为参数，该对象指定 action 的类型（type），以及需要传递给 XMLHttpRequest 的配置对象（payload）。

具体来说，payload 包含以下属性：

url：请求的 URL
method：请求的 HTTP 方法，默认为 GET
headers：请求的 headers
body：请求的 request body
responseType：请求的 response type

Step 2：处理过程

现在有了上面的过程，我们需要在 Redux 中处理它。redux-promise-procedures 添加了一个 reducer，该 reducer 会根据在 payload 中指定的 URL 发出 HTTP 请求。在请求的生命周期中，该 reducer 将生成自动化的 redux action。以下是如何处理操作的实现：

import { handleProcedures } from "redux-promise-procedures";

const reducer = handleProcedures({});

const store = createStore(reducer);

redux-promise-procedures 提供了一个名为 handleProcedures 的工具函数，它创建一个 reducer，该 reducer 处理 redux-promise-procedures 所有的过程。

Step 3：发起过程

要发起过程，只需执行下面的代码：

store.dispatch(getUsers());

执行此代码后，redux-promise-procedures 将根据指定的 URL 发出HTTP请求，并在请求的完整生命周期中处理它。然后，根据该操作的状态，它将自动生成与操作状态对应的 redux action。

高级用法

在上面的步骤中，我们演示了 redux-promise-procedures 的基本用法。下面将介绍一些高级用法。

异常处理

当请求响应返回一个非 2xx 的状态时，redux-promise-procedures 将自动将错误信息添加到最终生成的 action 中。可以通过检查 action.error 属性来处理错误。

store.dispatch(getUsers()).then(() => {
  const state = store.getState();
  
  if(state.error) {
    console.log(`Error: ${state.error}`);
  }
});

组合多个过程

处理多个过程时，我们可以使用 combineReducers 来将它们组合起来。

-- -------------------- ---- -------
------ - ---------------- ----------- - ---- --------
------ - ---------------- - ---- ---------------------------

----- -------- - -----------------
  ----- --------------
  -------- -
    ---- -------------------------
  -
---

----- -------- - -----------------
  ----- --------------
  -------- -
    ---- -------------------------
  -
---

----- ------- - -----------------
  ----------- ------------------
    ---------
    --------
  --
---

----- ----- - ---------------------

结论

redux-promise-procedures 让处理异步 redux action 从麻烦的手动模式变得简单并且自动化。同时，它可以让你的代码变得更具备模块化和重用性。我们建议在您的下一个 Redux 项目中使用它，并享受它为您提供的好处。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6006734d890c4f72775837be