npm 包 redux-api-isomorphic-fetch-middleware 使用教程

前言

在进行前端项目开发时，我们经常涉及到发送异步请求获取数据，而 Redux 是现代化前端应用常用的状态管理工具，为了更方便的在 Redux 中处理异步请求，我们可以使用 redux-api-isomorphic-fetch-middleware 这个 npm 包。

简介

redux-api-isomorphic-fetch-middleware 是一个 Redux 中间件，充分利用了基于 fetch API 的 isomorphic-fetch 库。它简化了 Redux 应用程序中的异步数据获取方案，并允许在服务端和客户端上执行相同的代码。此外，redux-api-isomorphic-fetch-middleware 还可以处理多个请求。

安装

你可以通过 npm 包管理工具来安装 redux-api-isomorphic-fetch-middleware。

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

使用

首先，在你的 Redux createStore() 调用中，你需要对 redux-api-isomorphic-fetch-middleware 进行配置。

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

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

现在，你就可以在你的 Redux actions 中使用带有 isomorphic-fetch 的 redux-api-isomorphic-fetch-middleware 了。在你的 Redux action 中创建一个 API 对象，并将其作为第一个参数传递给 fetch() 函数。此外，你还需要指定此操作成功或失败时要调用的动作类型。

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

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

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

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

每个 API 对象都由一个 endpoint 和 (optional) method 的属性值组成。你也可以在 API 中包含其它的属性，例如 headers 或 body。

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

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

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

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

服务端渲染

redux-api-isomorphic-fetch-middleware 在服务器上也可以正常工作，服务器上的 API 调用将返回 Promise，客户端上的 API 调用则将在组件加载时自动执行。

首先，在你的服务器渲染代码中禁用自动执行 API 调用，并将 API 调用返回的 Promise 传递给模板文件以在客户端加载时执行。

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

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

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

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

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

在客户端，你需要手动将你的 API 动作调用注入到组件挂载时调用的 componentDidMount() 函数中。

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

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

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

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

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

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

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

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

处理异步请求

在应用中同时发起多个异步请求是非常常见的，redux-api-isomorphic-fetch-middleware 可以很好地处理这方面的需求。只需使用逗号分隔即可。如：

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

这里，我们同时为一个名为 MANAGE_USER 的请求和一个名为 MANAGE_PRODUCTS 的请求创建了两个不同 API 对象。使用这些请求就像正常操作一样简单，只需在接受 API 对象参数的函数中指定 MANAGE_USER 或 MANAGE_PRODUCTS。

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

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

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

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

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

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

示例

最后，下面为大家展示一个完整的示例代码：

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

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

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

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

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

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

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

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

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

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

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

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

结论

在本文中，我们介绍了 redux-api-isomorphic-fetch-middleware 中的使用和必要配置。同时，我们也展示了如何在客户端和服务端共享管理数据存储器，以提高应用的性能和用户体验，从而帮助你更好地完成你的项目。希望本文可以对你有所帮助。

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

阅读全文

猜你喜欢

  • npm 包 translitit-mkhedruli-georgian-to-ipa 使用教程

    前言 在前端开发过程中，我们经常需要处理多种语言，其中就包括需要将非拉丁字母文字转换成拉丁字母文字（例如将俄语、希伯来语、阿拉伯语等转化为英语）。这个过程通常被称为文字转换/翻译。

    2 年前
  • npm 包 dedupewebpackloader 使用教程

    在前端开发中，Webpack 是一个常用的打包工具。在使用过程中，经常会出现同一个 npm 包被多个模块所引用的情况。这时候，Webpack 会将此包在每个模块中都打包一遍，导致打包出来的文件变得过于...

    2 年前
  • npm 包 dependency-tree-alias-hack 使用教程

    前言 在前端开发中，我们经常需要使用 npm 包管理器来管理我们的项目依赖。而在一些复杂的项目中，我们可能会使用别名（alias）来更方便地引用我们的资源文件。但是，npm 包管理器并不支持使用别名来...

    2 年前
  • npm 包 ng-poller 使用教程

    介绍 ng-poller 是一个基于 AngularJS 的轮询库，它可以帮助开发人员轻松地对服务器的状态更新进行监控。它提供了可配置的轮询机制，可以设定轮询间隔、成功或失败时的动作以及轮询主题。

    2 年前
  • npm 包 domain-based-spellchecker 使用教程

    在前端开发过程中，拼写错误是一个常见的问题。为了避免这种错误发生，并提高前端开发的效率，我们可以使用 npm 包 domain-based-spellchecker 来进行拼写检查。

    2 年前
  • npm 包 ng2-typeahead-startswith 使用教程

    前言 在前端开发中，我们经常需要实现自动补全、下拉提示等功能，而这些功能往往需要用到一些库或插件。今天我们要介绍的是一个非常实用的 npm 包，它能够快速实现输入框的下拉提示功能，这就是 ng2-ty...

    2 年前
  • npm 包 @os33/gulp-rev 使用教程

    简介 @os33/gulp-rev 是一款针对 gulp 前端构建工具的插件，能够为文件添加 hash 值，避免版本更新后浏览器缓存的问题。 安装 --- ------- --------------...

    2 年前
  • npm 包 asui 使用教程

    随着前端技术的不断发展，我们常常需要使用各种组件、框架等去实现我们的需求。而 npm 包是当今前端开发中不可或缺的工具之一。 asui 是一个基于 React 和 Antd 的快速开发 UI 库，它提...

    2 年前
  • npm 包 elao-container.js 使用教程

    elao-container.js 是一个方便的前端开发工具，能够让你轻松地为网站添加一个可水平滚动的容器。本文将详细介绍 elao-container.js 的使用教程，并给出示例代码帮助你更好地理...

    2 年前
  • NPM 包 @freeman29/weather-on 使用教程

    前言 在前端开发中，我们常常需要调用天气 API 来获取城市天气信息，以便在页面中展示。但是在实际开发过程中，我们可能会遇到各种问题，比如 API 的使用限制、数据格式的处理等等。

    2 年前
  • npm 包 src-import-curt 使用教程

    在前端开发中，我们经常需要将各种组件拼接到一起，形成完整的页面或应用程序。通常情况下，这些组件都是以模块化的方式编写的，并且使用 ES6 的模块化语法进行导入和导出。

    2 年前
  • npm 包 kuber-cli 使用教程

    介绍 kuber-cli 是一个用于帮助开发人员管理 Kubernetes 集群的命令行工具。它可以让你方便地部署、管理和监控 Kubernetes 应用。 在本教程中，我们将介绍如何使用 kuber...

    2 年前
  • npm 包 string-split-join 使用教程

    在前端开发中，字符串的处理是非常重要的一个环节。而且经常有将一串字符串按照某个字符进行分割或者合并的需求。这时候，我们可以使用一个叫做 string-split-join 的 npm 包来帮助我们快速...

    2 年前
  • npm 包 telegraf-session-mysql 使用教程

    在使用 telegraf 管理 Telegram 机器人时，为机器人添加 用户会话存储 功能是必不可少的。其中，telegraf-session 是一个常用的会话存储 npm 包，也是 telegra...

    2 年前
  • npm 包 nodebb-plugin-sso-auth-weibo 使用教程

    前言 在前端领域中，开发者们常常会使用 npm 这个命令行工具来管理项目依赖和发布自己的工具库，而 nodebb-plugin-sso-auth-weibo 则是 npm 上的一款适用于 NodeBB...

    2 年前
  • npm 包 web-icon-node 使用教程

    介绍 在前端开发中，经常需要使用一些图标来美化页面或提供更好的用户体验。web-icon-node 是一个 NPM 包，提供了超过 4000 个图标选择。本文将介绍如何使用 web-icon-node...

    2 年前
  • npm 包 nodebb-plugin-sso-auth-qq 使用教程

    在前端开发中，我们经常需要在网站中添加第三方登录的功能。而 nodebb-plugin-sso-auth-qq，是一款专门为 NodeBB 论坛设计的 QQ 授权登录插件。

    2 年前
  • npm 包 react-countdown-date 使用教程

    介绍 react-countdown-date 是一个可在 React 应用中使用的倒计时组件。它能够在包括秒、分、时、天等不同维度下进行倒计时。 安装 在项目目录下使用 npm 安装 react-c...

    2 年前
  • npm 包 vscode-test-set-content 使用教程

    前言 在前端开发中，我们经常会使用 VS Code 作为主要的开发工具。在开发过程中，有时候需要一些自动化的辅助工具来提高开发效率。其中，自动设置 VS Code 中的测试集内容便是一个比较实用的功能...

    2 年前
  • npm 包 superfly-css-utilities-colors 使用教程

    什么是 superfly-css-utilities-colors superfly-css-utilities-colors 是一个 npm 包，它提供了一组有用的 css 颜色工具类，让我们在前端...

    2 年前

相关推荐

    暂无文章