简介
apollo-thunk 是一个 Node.js 的 npm 包，它是基于 Apollo GraphQL 和 Redux Thunk 的一个中间件。通过使用 apollo-thunk，我们可以轻松地将 Apollo GraphQL 和 Redux Thunk 集成到我们的应用程序中，从而更好地管理应用程序的状态和数据。
安装
安装 apollo-thunk 可以使用 npm 或 yarn。
使用 npm：
npm install apollo-thunk
使用 yarn：
yarn add apollo-thunk
用法
使用 apollo-thunk 首先需要创建一个新的 Apollo Link，然后将其添加到 Apollo Client 中。假设我们已经有一个 Apollo Client 实例：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
------ - -------- - ---- -------------------
------ - ------------- - ---- ------------------------
----- ------ - --- --------------
----- --- ----------
---- -----------------------------
---
------ --- ----------------
---要添加 apollo-thunk 中间件，我们需要首先安装 redux-thunk：
npm install redux-thunk
或
yarn add redux-thunk
然后创建一个新的 Apollo Link：
-- -------------------- ---- -------
------ - ---------- - ---- --------------
------ - -------------------- - ---- ---------------
----- -------------- - -----------------------
----- ------ - --- --------------
----- -----------------
---------------
--- ----------
---- -----------------------------
--
---
------ --- ----------------
---然后我们就可以在我们的 Redux action 中使用 apollo-thunk 了。首先创建一个异步的 action：
-- -------------------- ---- -------
------ - --- - ---- ---------------
------ - ----------------- - ---- ---------------
----- ------------- - ----
----- -
----- -
--
----
-
-
--
------ ----- --------- - -- -- ---------------------------------这个 action 返回了一个函数，这个函数会被 Redux Thunk 处理。在这个函数中，我们创建了一个 Apollo Query 并将其封装成一个 apollo-thunk。这个 apollo-thunk 在被调用时会发起网络请求并返回数据，这个数据会被保存在 Redux Store 中。
然后我们就可以使用这个 action 来加载我们的数据了：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
------ - --------- - ---- --------
------ - --------- - ---- ------------
-------- ---------- -
----- -------- - --------------
------------ -- -
----------------------
-- ----
------ -------- ---- ---- ----------
-在这个例子中，我们使用了 React 的钩子函数 useDispatch 和 useEffect 来加载我们的数据。使用 useDispatch 来派发我们的 Redux action，使用 useEffect 来在组件挂载后加载我们的数据。
示例代码
完整的示例代码可以在 GitHub 上找到：https://github.com/apollographql/apollo-thunk-example。
总结
通过使用 apollo-thunk，我们可以将 Apollo GraphQL 和 Redux Thunk 集成到我们的应用程序中，从而更好地管理应用程序的状态和数据。在 Redux 中使用 apollo-thunk 可以使我们更好地管理和操作数据，并且可以更好地处理异步操作。这对于大型的 React 应用程序来说是非常有价值的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b43c6eb7e50355dbe1c