RTK Query 示例
示例概述
我们提供各种示例,演示使用 RTK Query 的各个方面。
这些示例并非旨在作为您应用程序的基础,而是为了展示您在应用程序中可能并不真正需要或想要的非常具体的行为。对于大多数用户来说,查询 和 变异 部分中的基本示例将涵盖您的大部分需求。
提示
请注意,在 CodeSandbox 中使用示例时,可能会遇到一些奇怪的行为,尤其是在分叉它们并开始编辑文件时。热重载、CSB 服务工作者和 msw
有时难以进入正确的页面——如果发生这种情况,只需在 CSB 浏览器窗格中刷新即可。
百宝箱
React 乐观更新
在下面的示例中,您会注意到一些事情。侧边栏上有两个 Posts
列表。上面的那个只有在成功变异并与服务器重新同步后才会更新。已订阅的那个由于乐观更新而会立即更新。如果发生错误,您将看到它被回滚。
信息
该示例有一些故意奇怪的行为……当编辑帖子的名称时,您很有可能遇到随机错误。
React 与 GraphQL
身份验证
使用 RTK Query 处理身份验证有几种方法。这是一个非常基本的示例,它从登录变异中获取 JWT,然后将其设置在我们的存储中。然后,我们使用 prepareHeaders
将身份验证标头注入到每个后续请求中。
分派操作以设置用户状态
此示例分派 setCredentials
操作以存储用户和令牌信息。
使用 extraReducers
此示例使用来自端点的匹配器和 authSlice
中的 extraReducers
。
React 类组件
查看 PostDetail
组件以了解类组件用法的示例。