npm 包 apollo-link-redux 使用教程

前言

在开发前端应用的过程中，经常需要管理应用的状态，这时候 Redux 就是一个很好的选择。而使用 GraphQL API 的应用也越来越多，这时候将 Redux 和 GraphQL 结合起来，可以极大地简化前端代码的开发，并且让状态管理更加统一和方便。npm 包 apollo-link-redux 就是一个可以实现 Redux 和 GraphQL 的整合的插件。

安装 apollo-link-redux

你可以在你的项目中使用 npm 安装 apollo-link-redux：

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

或者使用 yarn 安装：

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

如何使用 apollo-link-redux

  1. 创建 Redux store

首先，需要在项目中创建 Redux store。具体的创建方法可以参考 Redux 的官方文档或者其他的教程。这里不再赘述。

  1. 创建 Apollo Client

然后，需要创建 Apollo Client。创建 Apollo Client 的步骤也是非常简单的，可以参考以下代码：

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

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

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

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

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

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

这段代码中，首先我们创建了一个 ReduxCache 对象，用于将 Apollo Cache 和 Redux Store 绑定起来。然后，我们又创建了一个 stateLink 对象，用于将我们的 state 数据存储到 Redux 中。接下来，我们创建了一个 HttpLink，用于将请求转发到 GraphQL 服务器。最后，我们使用 ApolloLink.from() 将 stateLink 和 httpLink 进行合并，并创建了一个 Apollo Client。

  1. 创建 apollo-link-redux

接下来，我们就可以创建 apollo-link-redux 了。这个过程也非常简单：

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

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

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

在这个代码片段中，我们使用 withClientState 创建了 stateLink。我们在 resolver 中定义了一个 updateExample 的 Mutation，这个 Mutation 用于更新 Redux Store 中的 example 字段。最后，我们调用 createLink 将 stateLink 和 Apollo Client 进行封装，这样我们就成功创建了一个 apollo-link-redux 对象。

  1. 使用 apollo-link-redux

最后，我们需要使用 apollo-link-redux。在 Apollo Client 的配置中加入 apollo-link-redux 即可实现和 Redux 的整合：

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

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

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

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

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

在这段代码中，我们创建了 apollo-link-redux 的中间件，并将其传递给了 Redux Store 的 applyMiddleware 函数。这样就可以在 Redux Store 中同时管理 apollo-link-redux 和其他的 Middleware。

另外，我们还需要在 ApolloProvider 中传递 Apollo Client，这样才能让 apollo-link-redux 和 Apollo Client 进行协同工作完成数据的查询、变更和缓存等操作。

示例代码

最后，我们来看一下一个完整的示例代码：

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

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

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

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

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

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

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

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

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

这个示例代码中，我们首先创建了一个 Redux Store，并将其传递给了 createReduxMiddleware，生成了一个 apollo-link-redux 实例。然后，我们又创建了一个 Apollo Client，并在其中加入了 apollo-link-redux，使其和 Redux Store 进行整合。接下来，我们使用 Provider 和 ApolloProvider 分别传递了 Redux Store 和 Apollo Client，这样我们整个 React 应用就和 Redux 和 GraphQL 结合了起来。

结语

通过本文，我们了解了如何使用 apollo-link-redux，让我们的 React 应用和 Redux 和 GraphQL 结合起来。同时，我们也介绍了使用 apollo-link-redux 的一些注意事项和示例代码。希望这篇文章可以对大家有所帮助。

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

阅读全文

猜你喜欢

  • npm 包 react-stubby 使用教程

    在前端开发中，经常需要使用到 mock 数据来测试和调试应用。而 react-stubby 是一个非常好用的 npm 包，它可以帮助我们快速地生成 mock 数据，并且可以与 React 无缝集成使用...

    3 年前
  • npm 包 ember-legacy-class-transform 使用教程

    概述： ember-legacy-class-transform 是一个针对 Ember2.x / Ember3.x 应用程序重构的 npm 包。它可以实现将过时的 Ember.Component 转...

    3 年前
  • npm 包 react-native-drag-drop-and-swap 使用教程

    简介 react-native-drag-drop-and-swap 是一款 React Native 的 npm 包，可以实现在组件之间进行拖拽和交换位置的功能。

    3 年前
  • npm 包 alipay-openapi 使用教程

    阿里巴巴集团推出的电子支付平台——支付宝，已经成为了国内移动支付行业的领军者。为了方便开发者接入支付宝的开放平台，阿里巴巴官方推出了 alipay-openapi npm 包。

    3 年前
  • npm 包 angular-bound-sensor 使用教程

    前言 angular-bound-sensor 是一个 Angular.js 的指令库，能够根据页面滚动事件等绑定元素的位置情况，通过改变元素 class 和发送事件来实现可视化效果。

    3 年前
  • npm 包 angular-visibility-change 使用教程

    简介 angular-visibility-change 是一个用于 AngularJS 应用程序的 npm 包，可以使用它来监听浏览器标签页的活动状态，并在标签页活动状态发生变化时执行特定的操作。

    3 年前
  • npm 包 bound-sensor 使用教程

    在前端开发中，我们经常需要监听某些元素在页面上的位置变化，以便触发一些事件。而实现这个功能需要处理许多细节，如元素宽度、高度、位置等等，这个时候我们可以使用一个工具类库来帮助我们更轻松地实现这个功能。

    3 年前
  • npm 包 graphql-ast-types 使用教程

    背景 随着前端开发的不断发展，单页应用程序逐渐占据了主流位置。在这种模式下，前端开发需要处理大量的数据和信息，而 GraphQL 作为一种强类型的查询语言，能够更加高效地处理数据，因此在前端领域中得到...

    3 年前
  • npm 包 ng2test1 使用教程

    什么是 ng2test1 ng2test1 是一个用于 Angular2+ 项目中进行单元测试的 npm 包。它提供了一系列 API 和工具，可以帮助开发人员在 Angular2+ 项目中快速、高效地...

    3 年前
  • npm 包 occurences_icare 使用教程

    在前端开发中，我们经常需要处理文本，其中一个常见的操作是查找某个字符串在文本中出现的次数。occurences_icare 就是一个专门用来处理字符串次数的 npm 包。

    3 年前
  • npm 包 wezom-accordion 使用教程

    Wezom-accordion 是一个用于创建折叠式导航栏的 npm 包，它是一个轻量级、易于使用的工具。在这篇文章中，我们将介绍如何使用这个 npm 包来创建一个折叠式导航栏，它将有助于您了解如何使...

    3 年前
  • NPM 包 Flipping-Cards 使用教程

    简介 Flipping-Cards 是一个基于 JavaScript 和 CSS 的开源库，它可以快速地创建漂亮的卡片翻转动画效果。无论您是想创建产品展示还是博客特效，都可以使用这个库来展示您的设计创...

    3 年前
  • npm 包 json-mapto-typescript 使用教程

    什么是 json-mapto-typescript json-mapto-typescript 是一个 npm 包，它可以将 JSON 对象自动映射为 TypeScript 类型定义，并输出到一个 T...

    3 年前
  • npm 包 @arjanfrans/spritesheet-generator 使用教程

    @arjanfrans/spritesheet-generator 是一个用于将多张图片拼接成一张精灵图的 npm 包。它可以极大地减少 HTTP 请求数，同时也能够优化图片加载。

    3 年前
  • npm包node-spotify-wrapper的使用教程

    如果你正在开发一个基于Spotify的Web应用程序，那么node-spotify-wrapper是一个非常有用的npm包。该包提供了一套基于Node.js的API，让你方便地通过Spotify We...

    3 年前
  • npm 包 react-audio-recorder-wavdownloader 使用教程

    简介 react-audio-recorder-wavdownloader 是一个基于 React 的 npm 包，它可以让你在浏览器中录制音频，并将音频保存为 WAV 文件。

    3 年前
  • npm 包 babel-plugin-transform-convert-debugger 使用教程

    前言 在前端开发中，我们经常需要调试代码。在 JavaScript 中，我们有一个调试工具—— debugger。在代码中插入 debugger，可以使得代码执行到当前行后停止，开发者可以在控制台中进...

    3 年前
  • npm 包 deepin-snazzy 使用教程

    在前端开发中，样式是非常重要的一个部分，好的样式可以让页面看起来更加美观、舒适。在使用样式时，我们有些时候可以借助其他人的经验和写好的代码，这时候，npm 包便成了我们的好帮手。

    3 年前
  • npm 包 pingoo 使用教程

    前言 随着前端技术的不断发展，我们可以使用越来越多的工具和库来帮助我们更好地完成项目。而在这些工具和库中，npm 包是我们使用得最为频繁的工具之一。npm 包的数量之多、种类之多，让我们有了更多可能的...

    3 年前
  • npm 包 vega-as-leaflet-layer 使用教程

    在前端开发中，我们常常需要将数据可视化并以交互的方式展现给用户。vega-as-leaflet-layer 就是一个方便我们在 Leaflet 地图上展示可视化数据的 npm 包。

    3 年前

相关推荐

    暂无文章