RTK Query 手动缓存控制详解updateQueryResult 与 patchQueryResult 完全解析【免费下载链接】rtk-queryData fetching and caching addon for Redux Toolkit项目地址: https://gitcode.com/gh_mirrors/rt/rtk-queryRTK Query 是 Redux Toolkit 官方提供的数据请求与缓存增强库而updateQueryResult与patchQueryResult正是它提供的手动缓存控制利器。掌握这两个方法你就能在缓存中预演数据变更轻松实现乐观更新Optimistic Update让界面响应快到零等待。本文带你从零理解这两个工具的用法、内部原理与搭配方式。两个工具解决什么问题RTK Query 会自动管理数据缓存查询结果存入 Redux Store多个组件共享同一份数据。但缓存并非只读——当你发起一次修改比如把待办事项标记为已完成接口还没返回时可以先手动改写缓存数据让 UI 立即更新。这两个方法都挂载在 API 对象的util字段下定义在核心模块中src/core/module.ts。updateQueryResult一句话生成修改 撤销方案updateQueryResult(endpointName, args, updateRecipe)接收三个参数endpointName端点名如getPostargs查询参数用于定位缓存中的哪条数据updateRecipe一个 Immer 风格的回调直接就地修改缓存草稿数据它的核心行为实现见 src/core/buildThunks.ts读取该端点当前缓存状态用 Immer 的produceWithPatches应用你的修改同时生成正向补丁patches和逆向补丁inversePatches立即把patches应用到 Store——缓存瞬间更新返回{ patches, inversePatches }供日后回滚。 巧妙之处一次调用既完成了改又拿到了撤销键。patchQueryResult直接应用补丁支持回滚patchQueryResult(endpointName, args, patches)更简单它接收一组 JSON 格式的差异补丁直接应用到指定缓存数据上实现见 src/core/buildThunks.ts。底层它派发了queryResultPatched动作由 Slice 通过applyPatches把补丁写回数据src/core/buildSlice.ts。它既是updateQueryResult的执行引擎也是失败时的时光机——把逆向补丁传进去缓存即刻恢复原样。乐观更新两者如何搭配典型的配合模式出现在变体mutation的生命周期回调中onStart({ id, ...patch }, { dispatch, context }) { // 立即改缓存并把撤销补丁存进 context context.undoPost dispatch( api.util.updateQueryResult(getPost, id, (draft) { Object.assign(draft, patch); }) ).inversePatches; }, onError({ id }, { dispatch, context }) { // 请求失败用逆向补丁回滚 dispatch(api.util.patchQueryResult(getPost, id, context.undoPost)); } 流程一句话总结开始时抢先更新缓存 → 成功则等待标签失效自动重新拉取 → 失败则用逆向补丁秒回滚。完整示例可参考官方文档 docs/concepts/optimistic-updates.md。两个工具对比一览对比项updateQueryResultpatchQueryResult输入端点名 参数 修改回调端点名 参数 补丁数组是否立即更新缓存✅ 是✅ 是是否返回逆向补丁✅ 返回{ patches, inversePatches }❌ 无返回值典型用途乐观更新的第一步执行补丁 / 失败回滚几个值得注意的实现细节空缓存保护如果目标查询从未发起过状态为uninitializedupdateQueryResult直接返回空补丁集合安全地什么都不做见 src/core/buildThunks.ts。非可草稿数据的兜底当缓存数据不是普通对象/数组时会自动生成整值替换replace补丁保证任何数据结构都能被更新和回滚。补丁机制来自 ImmerproduceWithPatches是 RTK Query 与 Immer 深度集成的产物也是它相比手写setState更可靠的原因——补丁可精确重放也可精确撤销。延伸阅读缓存管理 API 完整签名docs/api/created-api/cache-management.md乐观更新概念与示例docs/concepts/optimistic-updates.mdReact 乐观更新实战示例docs/examples/react-optimistic-updates.md【免费下载链接】rtk-queryData fetching and caching addon for Redux Toolkit项目地址: https://gitcode.com/gh_mirrors/rt/rtk-query创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考