前言
在开发前端应用的过程中，经常需要管理应用的状态，这时候 Redux 就是一个很好的选择。而使用 GraphQL API 的应用也越来越多，这时候将 Redux 和 GraphQL 结合起来，可以极大地简化前端代码的开发，并且让状态管理更加统一和方便。npm 包 apollo-link-redux 就是一个可以实现 Redux 和 GraphQL 的整合的插件。
安装 apollo-link-redux
你可以在你的项目中使用 npm 安装 apollo-link-redux：
npm install apollo-link-redux
或者使用 yarn 安装：
yarn add apollo-link-redux
如何使用 apollo-link-redux
- 创建 Redux store
首先，需要在项目中创建 Redux store。具体的创建方法可以参考 Redux 的官方文档或者其他的教程。这里不再赘述。
- 创建 Apollo Client
然后，需要创建 Apollo Client。创建 Apollo Client 的步骤也是非常简单的，可以参考以下代码：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
------ - ------------- - ---- ------------------------
------ - -------- - ---- -------------------
------ - ---------- - ---- --------------
------ - --------------- - ---- --------------------
------ - ---------- - ---- ---------------------
------ - ----- - ---- ----------------------------
-- -- -----
----- ---------- - --- ------------ ------ ----- ---
-- -- ---------
----- --------- - -----------------
------ -----------
--------- -
-------- ------ -------
--
---------- --
---
-- -- --------
----- -------- - --- ----------
---- ----------
---
-- -- --------- - --------
----- ---- - --------------------------- -----------
-- -- ------ ------
----- ------ - --- --------------
-----
------ --- ----------------
---这段代码中，首先我们创建了一个 ReduxCache 对象，用于将 Apollo Cache 和 Redux Store 绑定起来。然后，我们又创建了一个 stateLink 对象，用于将我们的 state 数据存储到 Redux 中。接下来，我们创建了一个 HttpLink，用于将请求转发到 GraphQL 服务器。最后，我们使用 ApolloLink.from() 将 stateLink 和 httpLink 进行合并，并创建了一个 Apollo Client。
- 创建 apollo-link-redux
接下来，我们就可以创建 apollo-link-redux 了。这个过程也非常简单：
-- -------------------- ---- -------
------ - --------------- - ---- --------------------
------ - ---- - ---- ------------------------------
------ - ----- - ---- ----------------------------
------ ---------- ---- --------------------
----- --------- - -----------------
------ ------
---------- -
--------- -
-------------- --- - ------- -- - ----- -- -- -
----------------- ----- - ------- - ---
------ -----
--
--
--
---
----- --------------- - --------------------- -------------在这个代码片段中，我们使用 withClientState 创建了 stateLink。我们在 resolver 中定义了一个 updateExample 的 Mutation，这个 Mutation 用于更新 Redux Store 中的 example 字段。最后，我们调用 createLink 将 stateLink 和 Apollo Client 进行封装，这样我们就成功创建了一个 apollo-link-redux 对象。
- 使用 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