乐观更新与缓存失效
在变更过程中立即更新界面，并使用标签使缓存数据失效。
乐观更新与缓存失效 是 CoddyKit 上的免费 React Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。
欢迎
本课将介绍如何在 RTK Query 中构建变更端点，使用乐观更新立即更新界面，并通过标签使过期的缓存条目失效。
变更端点
使用 builder.mutation() 定义变更。变更会修改服务器数据（POST、PUT、DELETE），并返回一个 useMutation 钩子。
export const userApi = createApi({
/* ... */
endpoints: (builder) => ({
updateUser: builder.mutation({
query: ({ id, ...body }) => ({
url: '/users/' + id,
method: 'PUT',
body,
}),
}),
}),
});使用变更钩子
从变更钩子中解构出 [trigger, result]。使用变更参数调用 trigger()。result 包含 isLoading、isSuccess 和 isError。
const [updateUser, { isLoading }] = useUpdateUserMutation();
const handleSave = async () => {
await updateUser({ id: 1, name: 'Alice' });
};用于失效处理的缓存标签
标签会将缓存的查询数据与变更关联起来。在查询上定义 `providesTags`，在变更上定义 `invalidatesTags`。变更运行时，RTK Query 会自动重新获取所有提供了失效标签的查询。
endpoints: (builder) => ({
getUsers: builder.query({
query: () => '/users',
providesTags: ['User'],
}),
deleteUser: builder.mutation({
query: (id) => ({ url: '/users/' + id, method: 'DELETE' }),
invalidatesTags: ['User'],
}),
})细粒度标签失效
使用带有 id 的标签对象实现细粒度失效。在 getUser 上提供特定用户的标签，并在 updateUser 时仅使该用户的缓存失效。
providesTags: (result, error, id) => [{ type: 'User', id }],
invalidatesTags: (result, error, { id }) => [{ type: 'User', id }]使用 onQueryStarted 进行乐观更新
在变更中使用 onQueryStarted，在服务器响应之前立即更新缓存；如果变更失败，则回滚更新。
updateUser: builder.mutation({
query: (user) => ({ url: '/users/' + user.id, method: 'PUT', body: user }),
async onQueryStarted(user, { dispatch, queryFulfilled }) {
const patch = dispatch(
userApi.util.updateQueryData('getUser', user.id, draft => {
Object.assign(draft, user);
})
);
try { await queryFulfilled; }
catch { patch.undo(); } // roll back on error
},
})使某种标签的所有实例失效
将 `{ type: 'User', id: 'LIST' }` 用作列表查询的标签，可以使完整列表失效，而不会使单个用户条目失效。
providesTags: result =>
result ? [
...result.map(({ id }) => ({ type: 'User', id })),
{ type: 'User', id: 'LIST' },
] : [{ type: 'User', id: 'LIST' }]手动使缓存失效
使用 dispatch(api.util.invalidateTags(['User'])) 以编程方式使特定标签失效。这对于组件外部的事件处理器很有用。
dispatch(userApi.util.invalidateTags(['User']));悲观更新与乐观更新
乐观更新：在服务器响应之前更新缓存（界面立即更新，出错时回滚）。悲观更新：等待服务器响应后再更新（更安全，但更慢）。请根据变更失败的风险进行选择。
何时使用标签，何时手动重新获取
当您明确知道要使哪些查询失效时，请使用标签。对于一次性的手动刷新，请使用查询钩子中的 refetch()。对于大型 API，标签更加自动化，也更易于扩展。
快速检查
在 RTK Query 中，变更端点上的 invalidatesTags 会执行什么操作？
回顾
使用 builder.mutation 定义变更。在查询上使用 providesTags，在变更上使用 invalidatesTags，以实现自动重新获取。将 onQueryStarted 与 updateQueryData 结合使用可实现乐观更新，并使用 undo() 回滚。
课程完成
恭喜您！您已完成 **Redux Toolkit 与 RTK Query**。现在您可以构建 Redux 切片，使用 createAsyncThunk 处理异步逻辑，并通过 RTK Query 的缓存和乐观更新管理服务器状态。
常见问题解答
「乐观更新与缓存失效」课时是免费的吗？
是的 — 「乐观更新与缓存失效」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。
「乐观更新与缓存失效」这节课中我会学到什么？
在变更过程中立即更新界面，并使用标签使缓存数据失效。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「乐观更新与缓存失效」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗？
能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。