npm 包: redux-async-fetcher 使用教程

在 React 项目中，状态管理通常使用 Redux 进行管理。redux-async-fetcher 是另一个强大的 npm 包，用于处理复杂的异步操作和状态更新。本文将带领您了解如何使用 redux-async-fetcher 包，并提供示例代码。

安装

您可以使用 npm 或 yarn 安装 redux-async-fetcher 包。打开您的终端并输入以下命令：

使用 npm：

npm install redux-async-fetcher

使用 yarn：

yarn add redux-async-fetcher

使用方法

redux-async-fetcher 包旨在处理异步操作以及状态更新。它并不是一个完整的状态管理工具，而是与 Redux 结合使用。让我们看看如何使用 redux-async-fetcher 包。

步骤 1：在 reducers 中配置 FetcherReducer

打开 Redux 中的 reducers 文件夹，并为每个模块创建一个 reducer。如果您使用的是 Redux Toolkit，您可以使用 createSlice 函数。

创建一个名为 FetcherReducer 的 reducer，并通过 combineReducers 函数将其合并到根 reducer 中。这将允许我们通过 fetcherData 来访问应用程序中的所有数据。

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

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

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

步骤 2：创建一个新的 fetchConfig 文件

接下来，我们需要为所有 fetch 请求创建一个统一的配置文件。在您的项目中创建一个名为 fetchConfig.js 的文件，并将以下代码添加到文件中：

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

fetchConfig 对象包含了所有 fetch 请求共有的配置，如请求方法，请求头以及凭证。每个请求都会根据需要改变这些配置。

为了改变 fetch 请求，我们需要在 fetchConfig 对象上定义可变字段，如请求 URL 和请求参数。我们将在执行每个 fetch 请求时做出这些更改。

步骤 3：创建 action 和 asyncAction

接下来，我们需要创建 action 和 asyncAction。

action 是在 reducer 中处理状态更新的简单对象。在 actions.js 文件中，创建一个名为 fetchSomething 的 action，并将 fetch 请求响应的数据作为 payload 传递给 reducer。

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

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

asyncAction 是一个带有 5 个参数的函数。第一个参数是一个字符串，表示 action 的类型。第二个参数是一个函数，该函数接受 dispatch 和 getState 函数作为参数，并返回一个 promise。第三个参数是一个可选项，用于配置请求。第四个参数是请求成功的 action，第五个参数是请求失败的 action。asyncAction 通过将接收到的 promise 与 fetcherData 部分透明化地结合来完成请求。

在 actions.js 文件中，创建一个名为 fetchSomethingAsync 的 asyncAction。

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

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

有几个参数值得注意：

第一个参数指定了 action 的类型。

第二个参数是使用 fetchConfig 和 fetch 页面的方法创建的异步函数。注意传递的参数就像在标准 fetch 中一样，但作为整个对象被传递。

第三个参数是可选的。它们是传递给 fetch() 做出一些改变的项目。比如您想使用 POST 请求而不是 GET 请求，您可以在这里更改请求方法，以及添加其他除 Headers 和 Body（通过 fetchConfig 传递）之外的其他信息。

第四个和第五个参数是请求成功和请求失败后分别执行的 action。

步骤 4：在组件中使用

在组件中使用 asyncAction 的最简单方法是在 componentDidMount 或 useEffect 中使用它。在完成请求后，此函数将返回一个 promise 对象，您可以在 .then () 和 .catch() 函数中使用它。

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

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

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

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

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

注意：fetch 请求是在组件中注册但由异步函数执行的。通过 select-fetcher-data-async 接受状态并检查 fetch 请求的状态（loading，error，data）来绑定组件。

示例代码

下面是使用 redux-async-fetcher 包的完整示例代码：

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

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

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

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

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

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

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

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

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

结论

redux-async-fetcher 是一个功能强大的 npm 包，可轻松处理复杂的异步操作和状态更新。但是，它只能与已安装的 Redux 库一起使用。在本篇文章中，我们提供了使用 redux-async-fetcher 包的详细介绍，并为您提供了示例代码。希望这篇文章对您有所帮助！

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006734f890c4f7277583820

阅读全文

猜你喜欢

  • NPM 包 bkb 使用教程

    简介 bkb 是一个用于构建现代 JavaScript 应用程序的 npm 包，它提供了一些实用的工具和库，使得前端开发更加高效，同时也提供了一些方便的 UI 组件来快速构建原型和示例应用。

    4 年前
  • npm 包 @benjd90/routing-controllers-openapi 使用教程

    在前端开发中，我们常常需要使用到后端提供的 API 接口来获取数据。而在开发 API 时，使用 Swagger 等文档工具来生成 API 文档可以帮助开发者更快速地理解和使用接口。

    4 年前
  • npm 包 blockly-node 使用教程

    什么是 blockly-node blockly-node 是基于 Blockly 的一个 npm 包，它允许开发者在 Node.js 中使用 Blockly 库进行开发。

    4 年前
  • npm 包 ra-data-prisma2 使用教程

    在前端开发中，我们经常需要使用一些后端数据，而前后端分离的开发模式越来越流行。为了提高开发效率，我们需要使用合适的工具来处理数据请求与响应。在这篇文章中，我们将介绍一个非常有用的 npm 包 ra-d...

    4 年前
  • Npm 包 nornj-cli-legacy 使用教程

    简介 nornj-cli-legacy 是一款支持 TypeScript、React 及检查器的模板引擎，是 React 和 Vue 的使用体验很相识的解决方案，具有先进的语法和更加快捷的开发体验。

    4 年前
  • npm 包 @staxval/postcss-dynamic-custom-properties 使用教程

    现在的前端开发离不开构建工具和模块化开发，其中，npm 作为前端中最大的包管理工具，成为了开发者必不可少的工具之一。本文将介绍一个在 CSS 中使用的 npm 包——@staxval/postcss-...

    4 年前
  • npm 包 @nrl-demo/knowledge-js 使用教程

    简介 在前端开发中，我们经常需要处理大量的数据，而这些数据通常都需要经过相应的处理和解析。@nrl-demo/knowledge-js 是一款基于 JavaScript 的 npm 包，可以用来对文本...

    4 年前
  • npm包jupyterlab_kernel_reconnector_extension使用教程

    前言 随着数据科学的兴起，Jupyter成为了数据科学家们不可或缺的工具，而JupyterLab则是Jupyter的最新版本，它集成了更多有用的社区插件和高级功能，方便数据科学家更加高效地进行工作。

    4 年前
  • npm 包 @haaretz/commitlint-config 使用教程

    在团队协作的开发过程中，代码的维护与更新显得尤为重要，这个过程其中一项重要的工作便是代码提交（Commit）。Commit 的信息应包含足够的详情，如何更好的遵循团队协作开发规范化是非常必要的。

    4 年前
  • npm 包 @haaretz/htz-frontend-cli 使用教程

    简介 @haaretz/htz-frontend-cli 是一个基于 Node.js 平台的命令行工具，它为前端开发者提供便捷的开发环境配置和构建工具集，可以最大化地提升前端开发工作效率，减少重复操作...

    4 年前
  • npm 包 @haaretz/react-utils 使用教程

    什么是 @haaretz/react-utils? @haaretz/react-utils 是一个提供 React 相关的辅助类和工具的 npm 包。该包由 Haaretz Digital 提供，适...

    4 年前
  • npm 包 delay.io 使用教程

    在前端开发中，我们经常会遇到需要延迟执行某些事件的需求，比如延迟发送请求、延迟执行动画等等。在这种情况下，可以使用 npm 包 delay.io 来帮助我们实现延迟执行的目的。

    4 年前
  • npm 包 sassdoc-theme-jigsass 使用教程

    Sassdoc-theme-jigsass 是一个用于自动生成 Sass 文档的 npm 包，它使用了 jigsass 的样式和分类体系，可以让你的文档文档更加美观易读。

    4 年前
  • npm 包 react-native-android-immersive-mode 使用教程

    前言 在 Android 系统中，沉浸式模式 (Immersive Mode) 是一种隐藏系统 UI 组件的设置，让你全屏显示你的 App，在用户触摸屏幕任意位置时恢复可见 UI 组件。

    4 年前
  • npm 包 tooltips-zly 使用教程

    前言 前端开发过程中，我们经常需要用到各种工具类库来实现一些交互效果。其中，Tooltips（提示框）是一个十分实用的组件，它不仅可以提供友好的用户体验，还可以为网站的可用性做出重要贡献。

    4 年前
  • npm 包 @spiderdisco/dotenv 使用教程

    在前端的开发中，我们经常需要在代码中引用一些敏感信息，比如 API key、数据库密码或者 S3 存储的访问凭证等等。将这些信息直接写在代码中会存在极大的安全风险，因此我们需要将其保存在一个安全的地方...

    4 年前
  • npm 包 react-native-image-album 使用教程

    前言 近年来，React Native 作为一种快速开发跨平台应用的技术越来越受欢迎。在移动端应用开发中，图片显示是最为重要的一环，因此我们需要一个方便易用的图片显示组件。

    4 年前
  • npm 包 appleex-utils 使用教程

    appleex-utils 是一个面向前端开发人员的通用工具类函数库，包含了很多开发中常用的工具函数，可以方便地帮助开发人员提高开发效率和代码复用率。 安装 在使用之前，你需要先安装 appleex-...

    4 年前
  • npm 包 @keptn/pitometer 使用教程

    前言 在现代 Web 开发中，性能优化已经成为不可避免的一部分。良好的性能可以使网站更快地加载和响应，保持用户体验的连贯性，并提高 SEO。当然，性能测试也越来越重要。

    4 年前
  • npm 包 plimited 使用教程

    简介 plimited 是一个简单而易用的 npm 包，可以限制一个异步操作的并发数。它支持 promise 和 callback 两种方式。这个 npm 包在实际的前端开发中非常实用，可以帮助我们控...

    4 年前

相关推荐

    暂无文章