Redux 和 GraphQL：前端的理想伴侣

面试官：小伙子，你的代码为什么这么丝滑？

随着前端应用程序的复杂性增加，数据管理变得更加重要。Redux 和 GraphQL 是两个流行的工具，它们为前端开发人员提供了强大的数据管理和查询能力。

引言

Redux 是一个 JavaScript 应用程序状态容器，它允许您将应用程序状态以可预测的方式管理和更新。Redux 的基本概念是单向数据流，这意味着应用程序的状态只能通过一种特定的方式更新。Redux 面向应用程序的状态管理，适用于后端 API。

GraphQL 是一种数据查询语言和运行时。它允许您以声明性方式描述您需要的数据，而不是按照 RESTful API 的方式简单地请求整个资源。 GraphQL 常用于前端数据查询，适用于前端 API。

Redux 和 GraphQL 的结合使开发人员能够轻松地管理状态和数据查询，并消除了许多与传统的 RESTful API 和 Flux 模型相关的困难。

Redux 和 GraphQL 集成

Redux 和 GraphQL 的结合旨在提供完整的状态管理和数据查询解决方案，以满足前端应用程序的需求。下面是将 Redux 和 GraphQL 集成到前端应用程序中的一个示例。

首先，我们需要安装 redux 和 react-apollo：

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

然后，我们需要创建一个 GraphQL 查询并将其存储在一个常量中。在这个示例中，我们将查询一个用户的信息：

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

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

接下来，我们需要创建一个 Redux 存储，并在这个存储中设置 Apollo Client。在这个示例中，我们会将 Apollo Client 配置为使用 InMemoryCache：

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

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

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

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

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

现在，我们将 Redux 存储和 Apollo Client 包装在一个 ApolloProvider 中，以确保所有的 React 组件都能够通过 context 访问到该数据：

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

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

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

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

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

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

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

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

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

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

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

现在，我们可以在 React 组件中使用 Apollo 的 graphql 函数来查询数据，并通过 Redux 存储进行访问。例如，在以下组件中，我们使用 graphql 函数查询用户数据，并将其存储在 Redux 存储中：

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

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

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

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

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

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

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

优化

由于 GraphQL 会返回所有用户数据，而不仅仅是您需要的数据，我们可能需要为查询结果添加一个缓存。这可以通过使用 Redux 存储和 Apollo Client 的缓存来实现。例如，在以下示例中，我们添加了一个缓存来存储请求的用户数据：

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

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

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

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

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

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

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

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

我们首先添加了一个 UPDATE_USER Redux 操作，它将响应存储在状态中。我们还将传递一个“fetchPolicy”选项，这将使 Apollo Client 首先检查缓存，然后只请求需要的数据。我们还启用了“notifyOnNetworkStatusChange”以显示加载指示器。

结论

Redux 和 GraphQL 是前端开发人员的理想伴侣之一。通过将这两个强大的工具结合在一起，我们可以更好地管理应用程序状态和数据查询，并获得更好的开发效率和协作经验。如果您的前端应用程序需要一个功能强大的状态管理和数据查询解决方案，那么 Redux 和 GraphQL 这两个工具很值得您去了解。

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

阅读全文

猜你喜欢

  • ECMAScript 2017 的新特性：Async Iteration 的使用方法

    在 ECMAScript 2017 中，我们迎来了一项新特性，Async Iteration（即“异步迭代”），它是一种在异步操作中使用迭代器（Iterator）的方法。

    17 天前
  • 如何测试 GraphQL API

    GraphQL 是一种新型的 API 查询语言，它允许开发者请求和返回所需的数据，而不需要像传统的 RESTful API 那样收到不必要的数据。然而，由于 GraphQL 的灵活性和动态性，测试 G...

    17 天前
  • 使用 Docker 和 Nginx 搭建 Node.js 应用

    使用 Docker 和 Nginx 搭建 Node.js 应用 在现代 Web 应用开发中，Docker 已经成为了一个必要的工具。Docker 是一个容器化技术，可以将整个应用程序打包到一个可移植的...

    17 天前
  • CSS Grid 如何取舍 “使用场景” 或 “适用范围”

    在前端开发中，布局一直是最基础也是最核心的一部分。在 CSS 中，我们用过很多布局方法，比如使用浮动实现多列布局，使用弹性盒子实现对齐等等。而在 CSS3 中，CSS Grid 布局成为了一种新的布局...

    17 天前
  • Deno 应用中常见的 SQL 注入错误及解决方法

    前言 SQL 注入是一个经典的安全问题，它存在于几乎所有 Web 应用中，也特别容易出现在基于 Deno 的后台应用程序中。本文将讨论 Deno 应用程序中常见的 SQL 注入错误，以及如何防止它们出...

    17 天前
  • 如何在 Mocha 测试中测试 redux reducer 的方法？

    在前端应用开发中，Redux 已经成为了一个流行的状态管理工具。然而，Redux 的 reducer 函数需要经常保证其正确性，这就需要有一个好的测试框架来确保 reducer 编写正确。

    17 天前
  • ES9 中 Reflect.ownKeys() 的详细用法

    在 ES9 中加入了一个新的方法 Reflect.ownKeys()，该方法可以用于获取一个对象所有的属性，包括 Symbol 类型的属性。这个方法可以帮助我们更方便地操作对象属性，同时也增强了代码的...

    17 天前
  • 在 React Native 中使用 Redux 构建电商应用

    React Native 是一个跨平台的框架，可以同时为 iOS 和 Android 创建本机应用。Redux 是一个流行的状态管理库，它可以更好地处理数据流，并简化代码的管理。

    17 天前
  • 在 Web 应用程序中使用 Fastify 和 GraphQL

    在 Web 应用程序中使用 Fastify 和 GraphQL Fastify 是一个快速和低开销的 Node.js web 框架，非常适合构建高性能的 Web 应用程序。

    17 天前
  • 如何在 React 中使用异步函数以及 ES2020 异步函数的优化

    如何在 React 中使用异步函数以及 ES2020 异步函数的优化 前言 在现代前端开发中，异步编程是不可避免的一个主题。React 作为当今最流行的前端框架，对于异步编程的支持也非常友好，同时 E...

    17 天前
  • 如何使用 ESLint 在 Express 项目中检查代码规范

    ESLint 是一个 JavaScript 代码检查工具，它可以帮助开发者在编写代码时检查常见的代码错误、保持代码风格的一致性、避免常见的安全问题等。在一个大型的 Express 项目中使用 ESLi...

    17 天前
  • 如何在 Express.js 应用程序中使用 HTTPS 进行保护？

    在当今的互联网世界中，安全性成为了任何应用程序开发的核心要素。其中，HTTPS 协议可以提供一定的安全机制，以防止敏感数据泄露、防止数据被窃取、篡改等。 在本文中，我们将探讨如何在 Express.j...

    17 天前
  • 如何使用 ECMAScript 2019 的 nullish 合并运算符来避免undefined or null类型的错误

    引言 在编写 JavaScript 代码时可能会遇到undefined or null类型的错误，这些错误经常在代码执行期间导致程序停止运行。ECMAScript 2019 引入了nullish合并运...

    17 天前
  • Sequelize: 使用 Sequelize 模块连接数据库

    介绍 Sequelize 是一种 Node.js 的 ORM(Object-Relational Mapping) 框架，可以轻松地在未使用 SQL 语句的情况下与代码中的数据库进行交互。

    17 天前
  • Docker-compose 常见错误及解决方案

    Docker-compose 是一种将多个 Docker 容器组合成一组服务的工具，可以透明地连接多个 Docker 容器，让开发者轻松创建，并在任意环境中运行本地服务。

    17 天前
  • Vue.js SPA 应用 SEO 改善范例

    Vue.js SPA 应用 SEO 改善范例 随着互联网的快速发展，网站变得越来越复杂和功能化，单页应用程序（Single Page Application, SPA）逐渐成为了一种流行的前端框架。

    17 天前
  • Babel 编译 React Native 遇到的常见问题及解决方法

    React Native 是一种用于构建跨平台移动应用程序的框架。它使用 JavaScript 语言，配合其强大的组件化架构，使得开发者可以更快、更简单地创建高质量的移动应用程序。

    17 天前
  • PM2 和 Node.js 的错误处理和日志记录最佳实践

    介绍 PM2 是 Node.js 应用程序进程管理器，它可以帮助我们启动，停止，重启和监控 Node.js 应用程序。当我们的 Node.js 应用出现错误或者崩溃时，我们需要及时地捕捉和记录错误，以...

    17 天前
  • 在使用 Enzyme 进行 React 组件测试时如何使用 cypress-axe 进行无障碍测试

    在开发 Web 应用程序时，我们需要确保应用程序足够可访问和无障碍。这不仅是遵守法规和标准的要求，同时也可以帮助您的应用程序更好地服务于您的用户，无论他们的身体状况如何。

    17 天前
  • 如何在 Headless CMS 中设置数据的自动备份

    前言 Headless CMS 是一种将内容管理系统 (CMS) 与前端或后端内容分离的方式，使开发者可以自由选择他们自己喜欢的技术堆栈来构建他们的网站或者移动应用。

    17 天前

相关推荐

    暂无文章