Normy × RTK Query实战一行createNormalizationMiddleware中间件搞定缓存自动更新【免费下载链接】normyAutomatic normalization and data updates for data fetching libraries (react-query, vue-query, trpc, swr, rtk-query and more)项目地址: https://gitcode.com/gh_mirrors/no/normyNormy是一款开源数据归一化库能让应用中的数据自动归一化、自动更新。今天介绍它的 RTK Query 集成包normy/rtk-query只需在 Redux 中间件里加上一行createNormalizationMiddleware即可实现缓存数据自动归一化与mutation 后自动更新所有相关 query彻底告别手写updateQueryData。为什么需要 Normy告别手动更新 RTK Query 缓存用过 RTK Query 的同学都有这个痛点一本书id: 1同时出现在「书籍列表」和「书籍详情」两个 query 里执行一次updateBookmutation 后你得手动 dispatch 两次api.util.updateQueryData分别修补列表和详情query 越多需要维护的更新逻辑越啰嗦还容易漏更新。有了 Normy这些手写更新逻辑可以直接删掉 mutation 返回{ id: 1, name: Name 1 Updated }后Normy 会自动找到所有包含该书的数据并同步更新。30秒上手安装并注册 createNormalizationMiddleware第一步安装集成包normy/core会作为依赖自动装入无需单独安装npm install normy/rtk-query第二步在configureStore时把中间件加到api.middleware之后就这一行import { createNormalizationMiddleware } from normy/rtk-query; const store configureStore({ reducer: { [api.reducerPath]: api.reducer, }, middleware: getDefaultMiddleware [ ...getDefaultMiddleware(), api.middleware, createNormalizationMiddleware(api), ], });中间件的实现见 packages/normy-rtk-query/src/index.ts它接受的第二个参数normalizerConfig可以按需传入配置项作用devLogging: true开发环境在控制台打印归一化过程方便调试getNormalizationObjectKey自定义对象识别方式如用_id字段或 GraphQL 的id _typenamenormalizeQuery/normalizeMutation按 query / mutation 名称选择性归一化见下文自动更新是怎么工作的理解归一化原理Normy 的工作原理很直观按 id 存储所有带id字段的对象无论嵌套多深都会被拆出来按 id 存入一个归一化数据池深度合并mutation 响应中的对象会与数据池中同 id 的对象深度合并自动扩散中间件监听到 mutation 成功后自动计算哪些 query 的数据受影响并通过api.util.updateQueryData把它们全部更新。要让自动归一化正常工作需满足 3 个前提条件对象有统一的识别字段通常是idid 在整个应用范围内唯一不只是同类对象内唯一同一 id 的对象在不同 query 中结构保持一致。官方示例中的书籍/作者数据完全符合以上条件可以参考 examples/rtk-query/src/api.js 里getBooks、getBook、updateBook的完整定义。进阶用法乐观更新与手动写入 setNormalizedData遇到 WebSocket 推送、乐观更新等没有 API 响应的场景可以用getNormalizer(dispatch)获取操作器一行写入即可同步所有相关 queryimport { getNormalizer } from normy/rtk-query; onQueryStarted: async (_, { dispatch, queryFulfilled }) { const normalizer getNormalizer(dispatch); normalizer.setNormalizedData({ id: 1, name: Name 1 Updated }); try { await queryFulfilled; } catch { normalizer.setNormalizedData({ id: 1, name: Name 1 }); // 失败自动回滚 } }这套写法同时覆盖了「立即更新 UI」和「失败回滚」两步比手动逐个修补 query 简洁得多。只归一化需要的 Query按名称开关默认所有 query 和 mutation 都会归一化。如果某些大查询不需要更新或想控制性能开销可以按名称选择性开启createNormalizationMiddleware(api, { normalizeQuery: queryType [getBooks, getBook].includes(queryType), normalizeMutation: endpointName endpointName updateBook, });其他性能建议mutation 响应只返回可能变化的字段query 被移除时 Normy 会自动做垃圾回收清理冗余数据无需手动处理。本地跑通官方 RTK Query 示例想亲手体验可以直接克隆仓库运行官方示例demo 跑在localhost:3000git clone https://gitcode.com/gh_mirrors/no/normy cd normy/examples/rtk-query pnpm install pnpm start示例提供了 4 个按钮更新书名、新增书籍、乐观更新、手动写入点击即可观察列表与详情缓存被自动同步的效果。示例入口配置见 examples/rtk-query/src/index.jsx其中开启了devLogging: true打开控制台就能看到每次归一化的明细。注意事项顶层数组仍需手动处理有一个边界需要知道顶层数组的新增、删除、排序仍需手动更新因为 Normy 无法判断新对象应加入哪个列表、放在哪个位置。而数组内部对象的字段更新比如书籍的likedByUsers列表变化依然是全自动的。小结一下normy/rtk-query用一行中间件换来了缓存自动归一化与自动更新query 越多收益越大。如果你正在使用 RTK Query 维护一堆updateQueryData样板代码不妨试试 Normy ⚡️【免费下载链接】normyAutomatic normalization and data updates for data fetching libraries (react-query, vue-query, trpc, swr, rtk-query and more)项目地址: https://gitcode.com/gh_mirrors/no/normy创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/8/22 15:40:26 · 阅读 1.2k Normy × RTK Query实战：一行createNormalizationMiddleware中间件搞定缓存自动更新
Normy × RTK Query实战一行createNormalizationMiddleware中间件搞定缓存自动更新【免费下载链接】normyAutomatic normalization and data updates for data fetching libraries (react-query, vue-query, trpc, swr, rtk-query and more)项目地址: https://gitcode.com/gh_mirrors/no/normyNormy是一款开源数据归一化库能让应用中的数据自动归一化、自动更新。今天介绍它的 RTK Query 集成包normy/rtk-query只需在 Redux 中间件里加上一行createNormalizationMiddleware即可实现缓存数据自动归一化与mutation 后自动更新所有相关 query彻底告别手写updateQueryData。为什么需要 Normy告别手动更新 RTK Query 缓存用过 RTK Query 的同学都有这个痛点一本书id: 1同时出现在「书籍列表」和「书籍详情」两个 query 里执行一次updateBookmutation 后你得手动 dispatch 两次api.util.updateQueryData分别修补列表和详情query 越多需要维护的更新逻辑越啰嗦还容易漏更新。有了 Normy这些手写更新逻辑可以直接删掉 mutation 返回{ id: 1, name: Name 1 Updated }后Normy 会自动找到所有包含该书的数据并同步更新。30秒上手安装并注册 createNormalizationMiddleware第一步安装集成包normy/core会作为依赖自动装入无需单独安装npm install normy/rtk-query第二步在configureStore时把中间件加到api.middleware之后就这一行import { createNormalizationMiddleware } from normy/rtk-query; const store configureStore({ reducer: { [api.reducerPath]: api.reducer, }, middleware: getDefaultMiddleware [ ...getDefaultMiddleware(), api.middleware, createNormalizationMiddleware(api), ], });中间件的实现见 packages/normy-rtk-query/src/index.ts它接受的第二个参数normalizerConfig可以按需传入配置项作用devLogging: true开发环境在控制台打印归一化过程方便调试getNormalizationObjectKey自定义对象识别方式如用_id字段或 GraphQL 的id _typenamenormalizeQuery/normalizeMutation按 query / mutation 名称选择性归一化见下文自动更新是怎么工作的理解归一化原理Normy 的工作原理很直观按 id 存储所有带id字段的对象无论嵌套多深都会被拆出来按 id 存入一个归一化数据池深度合并mutation 响应中的对象会与数据池中同 id 的对象深度合并自动扩散中间件监听到 mutation 成功后自动计算哪些 query 的数据受影响并通过api.util.updateQueryData把它们全部更新。要让自动归一化正常工作需满足 3 个前提条件对象有统一的识别字段通常是idid 在整个应用范围内唯一不只是同类对象内唯一同一 id 的对象在不同 query 中结构保持一致。官方示例中的书籍/作者数据完全符合以上条件可以参考 examples/rtk-query/src/api.js 里getBooks、getBook、updateBook的完整定义。进阶用法乐观更新与手动写入 setNormalizedData遇到 WebSocket 推送、乐观更新等没有 API 响应的场景可以用getNormalizer(dispatch)获取操作器一行写入即可同步所有相关 queryimport { getNormalizer } from normy/rtk-query; onQueryStarted: async (_, { dispatch, queryFulfilled }) { const normalizer getNormalizer(dispatch); normalizer.setNormalizedData({ id: 1, name: Name 1 Updated }); try { await queryFulfilled; } catch { normalizer.setNormalizedData({ id: 1, name: Name 1 }); // 失败自动回滚 } }这套写法同时覆盖了「立即更新 UI」和「失败回滚」两步比手动逐个修补 query 简洁得多。只归一化需要的 Query按名称开关默认所有 query 和 mutation 都会归一化。如果某些大查询不需要更新或想控制性能开销可以按名称选择性开启createNormalizationMiddleware(api, { normalizeQuery: queryType [getBooks, getBook].includes(queryType), normalizeMutation: endpointName endpointName updateBook, });其他性能建议mutation 响应只返回可能变化的字段query 被移除时 Normy 会自动做垃圾回收清理冗余数据无需手动处理。本地跑通官方 RTK Query 示例想亲手体验可以直接克隆仓库运行官方示例demo 跑在localhost:3000git clone https://gitcode.com/gh_mirrors/no/normy cd normy/examples/rtk-query pnpm install pnpm start示例提供了 4 个按钮更新书名、新增书籍、乐观更新、手动写入点击即可观察列表与详情缓存被自动同步的效果。示例入口配置见 examples/rtk-query/src/index.jsx其中开启了devLogging: true打开控制台就能看到每次归一化的明细。注意事项顶层数组仍需手动处理有一个边界需要知道顶层数组的新增、删除、排序仍需手动更新因为 Normy 无法判断新对象应加入哪个列表、放在哪个位置。而数组内部对象的字段更新比如书籍的likedByUsers列表变化依然是全自动的。小结一下normy/rtk-query用一行中间件换来了缓存自动归一化与自动更新query 越多收益越大。如果你正在使用 RTK Query 维护一堆updateQueryData样板代码不妨试试 Normy ⚡️【免费下载链接】normyAutomatic normalization and data updates for data fetching libraries (react-query, vue-query, trpc, swr, rtk-query and more)项目地址: https://gitcode.com/gh_mirrors/no/normy创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考