npm 包 apollo-thunk 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 apollo-thunk 使用教程

简介

apollo-thunk 是一个 Node.js 的 npm 包，它是基于 Apollo GraphQL 和 Redux Thunk 的一个中间件。通过使用 apollo-thunk，我们可以轻松地将 Apollo GraphQL 和 Redux Thunk 集成到我们的应用程序中，从而更好地管理应用程序的状态和数据。

安装

安装 apollo-thunk 可以使用 npm 或 yarn。

使用 npm：

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

使用 yarn：

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

用法

使用 apollo-thunk 首先需要创建一个新的 Apollo Link，然后将其添加到 Apollo Client 中。假设我们已经有一个 Apollo Client 实例：

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

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

要添加 apollo-thunk 中间件，我们需要首先安装 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