npm 包 redux-fetch 使用教程

redux-fetch 是一个适用于 React 应用程序的 NPM 包，它提供了一种简单的方式来处理 Web 请求，并将响应数据发送到 redux store。该包是基于 Redux 架构开发的，可以轻松地与 React 和 Redux 应用程序进行整合，同时提供了对 Express 和 Koa 等服务器端框架的支持。

安装

首先，在你的 React 和 Redux 应用程序中安装 redux-fetch。

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

使用

创建 Redux Store

创建 Redux store 并将 redux-fetch middleware 添加到中间件集合中。

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

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

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

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

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

注意：确保创建 store 时将 redux-fetch middleware 添加到中间件集合中，并将此 middleware 放在 thunk middleware 前面。

发送请求

在 Redux action creators 中使用 fetchAction 函数向服务器请求数据。

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

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

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

fetchAction 接受一个对象作为参数，该对象包含以下属性：

  • endpoint：请求的 API 地址。
  • method：HTTP 请求方法（如 “GET”、“POST” 或 “DELETE” 等）。
  • types：Redux action types 数组，分别表示请求开始、请求成功和请求失败。
-
  --------- ------------
  ------- ------
  ------ --------------------- -------------------- --------------------
-

处理响应

定义一个 reducer 函数来处理成功或失败的响应。

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

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

当请求成功时，redux-fetch 会自动向 redux store 分发一个类型为 ‘LOAD_DATA_SUCCESS’ 的 action，其中包含从服务器返回的响应数据。当请求失败时，redux-fetch 会向 redux store 分发一个类型为 ‘LOAD_DATA_FAILURE’ 的 action，其中包含响应中的错误信息。

在组件中使用

在 React 组件中使用 connect 函数连接 Redux store，并调用 action creators 来发起请求。

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

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

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

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

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

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

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

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

注意：首先，在 component mount 时发出请求（通过调用 this.props.loadData()）。当需要在组件中使用 Action Creator 时，请使用 mapDispatchToProps 对象而不是函数。

完整示例

以下是一个使用带有 Redux 的 fetch 的完整示例。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上就是 redux-fetch 包的详细使用教程，现在你就可以开始通过 Redux 易受攻击的加拿大的 fetch 来更好地控制您的 Web 请求了！

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

阅读全文

猜你喜欢

  • npm 包 splat-points-1d 使用教程

    在前端开发中，我们经常需要使用各种工具来帮助我们完成各种任务。其中，npm 是非常常用的包管理工具，可以帮助我们快速获取各种工具和库。在这篇文章中，我将介绍如何使用一个名为 splat-points-...

    4 年前
  • npm 包 speedbump 使用教程

    前言 在 web 前端开发过程中，我们难免会遇到一些需要限制用户提交速度的场景，比如防止重复提交、保护服务器，此时我们可以使用 npm 包 speedbump。 什么是 speedbump speed...

    4 年前
  • npm 包 spun-webdriver-sync 使用教程

    前言 在进行前端自动化测试时，我们常常需要使用到测试框架和库以及其他一些工具。其中，Webdriver 是一个用于自动化测试的非常流行的工具，但是使用 Webdriver 进行测试却有一个显著的缺陷：...

    4 年前
  • npm 包 speedconcat 使用教程

    在前端开发中，我们经常需要对多个 CSS 或 JS 文件进行合并以提升网页加载速度。而 npm 包 speedconcat 是一款可以让文件合并过程更加高效的工具，它不仅可以帮助我们快速合并文件，还会...

    4 年前
  • npm 包 speedcurve-api 使用教程

    介绍 SpeedCurve 是一个专业的性能监控工具，可以用于监控网站的性能情况，并且提供了丰富的可视化报表，帮助开发者快速识别性能瓶颈。SpeedCurve 也提供了 API 接口，方便开发者通过程...

    4 年前
  • npm 包 spore-errors 使用教程

    如果您是一名前端工程师，那么您一定会不可避免地遇到错误处理的问题。在前端应用程序中，如果不加入错误处理机制，那么当程序出现错误时，就会使用默认的浏览器行为进行处理，这就会影响用户的体验。

    4 年前
  • npm 包 spur-common 使用教程

    简介 npm 是 Node.js 的包管理工具，而 spur-common 是一个 npm 包，提供了前端开发所需的工具函数和样式，使开发者能够更加高效地进行开发。

    4 年前
  • npm 包 spur-config 使用教程

    在前端开发中，我们经常需要用到配置参数。这些参数通常保存在不同的文件中，如 JSON，yaml 或 ini 文件。为此，我们需要一种配置库，可以帮助我们轻松地将这些配置参数使用在我们的应用程序中。

    4 年前
  • npm 包 speedcoach 使用教程

    随着前端开发越来越复杂，性能优化成为了不可忽视的部分。如果您也关注性能优化，那么 speedcoach 是一款值得一试的 npm 包。本文将为您介绍 speedcoach 的使用教程，帮助您更好的理解...

    4 年前
  • npm 包 spur-errors 使用教程

    介绍 在前端开发中，错误处理是非常重要的一部分。随着代码规模的增大，错误的种类和处理方式也越来越多。为了更好的处理错误，我们可以使用 npm 包 spur-errors。

    4 年前
  • npm 包 spur-events 使用教程

    在前端开发中，我们经常需要在应用程序中实现事件驱动型编程。而精准而可靠地捕捉和处理事件则是事件驱动型编程的关键。此时，npm 包 spur-events 就可以派上用场了。

    4 年前
  • npm 包 spur-id 使用教程

    随着前端技术的发展，现在很多项目都采用了模块化开发。为了更好地实现模块化开发，npm成为了前端工程师必不可少的工具之一。而在这个 npm 包的世界里，有一个非常好用的的包叫做 spur-id。

    4 年前
  • npm包spur-interaction-lock使用教程

    在前端开发中，我们经常需要对特定的元素或页面进行交互锁定，以防止用户在进行某些操作时造成错误或混乱。而npm包spur-interaction-lock就是一个非常实用的工具，可以帮助我们实现这一功能...

    4 年前
  • npm 包 spur-mockserver 使用教程

    前言 在开发前端项目的过程中，经常需要测试前端与后端的接口是否正常，这就需要模拟接口的返回值来进行测试，而手动模拟接口返回值成本较高，也容易出错。因此，推荐使用 spur-mockserver 这个 ...

    4 年前
  • npm 包 speedr-bitset 使用教程

    什么是 speedr-bitset speedr-bitset 是一个用于处理位运算和二进制矢量的 JavaScript 库。这个库提供了一系列方法可以用来处理二进制数据，如：二进制数据的运算、比较、...

    4 年前
  • npm 包 speeds 使用教程

    在前端开发中，经常会用到各种各样的 npm 包来提升开发效率。其中一个常用的 npm 包就是 speeds。speeds 是一个方便、快速、易于使用的 JavaScript 模板引擎。

    4 年前
  • npm包spline-emitter使用教程

    在前端开发中，有很多常用的npm包，spline-emitter就是其中一个。它是一个轻量级的JS库，提供了许多Spline曲线绘制和计算功能。今天，我们将和大家一起来学习npm包spline-emi...

    4 年前
  • npm 包 spline-interpolator 使用教程

    简介 spline-interpolator 是一个用于计算样条插值的 JavaScript 工具包，通过该工具包，可以为离散数据构建平滑的曲线，并进行曲线上的插值操作。

    4 年前
  • npm 包 spline-path 使用教程

    在前端开发中，有很多常见的情况需要我们根据已知的轨迹（例如折线图、动画路径等）进行插值，这个时候，spline-path 就是我们最好的选择。spline-path 是一个 npm 包，提供了非常方便...

    4 年前
  • npm 包 speedr-array2 使用教程

    在前端开发中，我们经常会用到数组的操作。为了方便开发，社区中涌现出了各种各样的工具库和插件。而今天我们要介绍的是一款名为 speedr-array2 的 npm 包，该包提供了大量的实用数组操作方法，...

    4 年前

相关推荐

    暂无文章