该技能面向 MetaMask 扩展的前端状态管理性能优化，涵盖 Redux 与状态管理相关规则，包括 reducer 最佳实践、selector 优化、状态归一化和批量更新。资料同时说明，作者为相关仓库提供了针对性变体，其中包含面向 metamask-extension 的版本。
一、用途 适用于以下情形：组件因无关状态变化而重渲染、某个 selector 每次调用都返回新的引用、reducer 中发生了状态直接修改。技能说明中明确：记忆化（memoization）相关内容归属于 perf-rendering。
二、主要规则与能力
- 绝不在 reducer 中修改状态：应始终为状态更新创建新的对象或数组，使用展开运算符或不可变辅助工具，使用内部基于 Immer 的 Redux Toolkit；不要直接修改状态。
- reducer 不得有副作用：保持 reducer 纯净，只依赖 state 和 action 参数，把副作用移到 action creator 或中间件中；不要在 reducer 中发起 API 调用、随机取值或日期计算。
- 不要把不可序列化的值放入状态：只存储普通对象、数组和原始值，保持状态可序列化以支持时间旅行调试与持久化；不要存储 Promise、Symbol、Map/Set、函数或类实例。
- 尽可能批量派发 action：可将多个相关 action 合并为单个 action，以减少 reducer 调用和重渲染次数；不要为相关的状态更新派发多个独立 action。
- 归一化状态结构：对复杂数据采用 byId 与 allIds 模式，避免深层嵌套，使更新更高效并避免重复；不要存储深层嵌套的关系型数据。
- 深层更新使用 Immer：使用 Redux Toolkit（内部使用 Immer），以“可变”写法实现不可变更新，简化复杂状态更新。
- 批量状态更新：合并多个状态更新为单次更新以减少重渲染；不要为相关变更分多次更新状态。
- 避免把恒等函数用作输出 selector：输出 selector 中应始终对数据进行转换，需要深层相等时使用 createDeepEqualSelector；不要在 createSelector 中使用恒等函数，那样无法获得记忆化收益。
- selector 只选择所需属性：只从状态中选择所需的特定属性，使用细粒度的输入 selector；不要返回整个状态对象或大型状态切片。
- 使用细粒度输入 selector：为组合创建细粒度输入 selector，由简单 selector 构建复杂 selector；不要用过于宽泛的 selector 直接访问状态。
- 谨慎使用 createDeepEqualSelector：默认使用 createSelector，仅当输入引用不变但嵌套值变化时使用 createDeepEqualSelector，并记录选择原因；不要对所有 selector 都用 createDeepEqualSelector，因为 isEqual 会在每次求值时运行，对大型负载开销较高。资料给出的背景是：updateMetamaskState 通过 Immer 向 Redux 应用后台 patch，Immer 保证结构共享，只有被修改路径上的对象获得新引用，未触及的分支保持原有标识。
- 将相关 selector 合并为一个记忆化 selector：把多个 useSelector 调用合并为单个记忆化 selector，减少冗余订阅与重渲染；不要连续调用多个 selector，因为每个都会创建独立订阅。资料列出的收益包括：只有一次订阅，组件每次状态变化只重渲染一次；共享记忆化确保组合输出仅在至少一个依赖变化时变化；将领域相关的数据整形逻辑集中到 selector 层。
- 避免在 useSelector 中使用内联 selector 函数：把 selector 函数提取为记忆化 selector，必要时对 selector 函数使用 useCallback；不要在 useSelector 中内联创建 selector 函数，因为每次渲染都会产生新引用。
三、使用方式 该技能以规则条目配合“正确/错误”代码示例的形式组织，每个规则包含 DO 与 DON'T 说明以及 TypeScript 示例。作者为仓库提供专属变体，每个章节适用于所注明的仓库。资料中给出的基础元数据与变体来源指向 GitHub 仓库路径，Revision 为 03e6fbb8b3bf507a2ec8aefc827a71ee8507a6ea。
四、适用场景 MetaMask 浏览器扩展前端中的 Redux 状态管理与 selector 编写，尤其是组件重渲染排查、selector 引用稳定性问题、reducer 状态篡改问题的优化场景。
五、限制 记忆化相关内容不在此技能范围内，而是归入 perf-rendering。createDeepEqualSelector 属于开销较高的手段，需谨慎使用并用 React DevTools 在发布前对热点深层 selector 进行性能分析，同时记录采用原因以便后续评估取舍。除上述资料外，其他限制条件暂未提供。
作者原文与适用仓库
作者：MetaMask。许可：MIT。原文包含针对不同仓库的专用版本，请按项目选择适用章节。
固定版本：03e6fbb8b3bf507a2ec8aefc827a71ee8507a6ea。
- 适用仓库
metamask-extension：官方正文
MIT License
Copyright (c) 2026 MetaMask
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.