随着前端应用程序的复杂性增加，数据管理变得更加重要。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：
npm install --save redux react-redux graphql-tag react-apollo apollo-boost
然后，我们需要创建一个 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