自定义合并策略深入ngrx-store-localstorage的mergeReducer与deepmerge数组覆盖机制【免费下载链接】ngrx-store-localstorageSimple syncing between ngrx store and local storage项目地址: https://gitcode.com/gh_mirrors/ng/ngrx-store-localstoragengrx-store-localstorage 是面向 ngrx/store 的状态持久化插件负责在 NgRx 状态仓库与浏览器 localStorage 之间双向同步实现页面刷新后状态自动恢复。本文聚焦两个核心机制mergeReducer自定义合并策略以及默认合并中 deepmerge 的数组覆盖行为帮新手快速搞懂状态复活的完整链路。 先搞懂合并发生在哪localStorageSync 的三步包装加载localStorageSync配置后每个 action 都会先经过库的包装层再进入你的业务 reducer调用顺序在projects/lib/src/lib/index.ts#L336-L351用你的 reducer 算出默认状态得到nextState执行mergeReducer(nextState, rehydratedState, action)把从 localStorage 读出的水合状态合并进去合并结果再交给你的真实 reducer 产出最终状态。也就是说无论默认还是自定义合并策略都发生在业务 reducer 之前它决定的是 reducer 看到的初始状态。⚙️ 默认合并策略deep merge 深合并 数组覆盖不传mergeReducer时库自动使用内置的defaultMergeReducer源码见projects/lib/src/lib/index.ts#L277-L299三个关键点时机仅当 action 为ngrx/store/init或ngrx/store/update-reducers时才合并其余动作原样放行方式调用deepmerge做深合并——对象逐键合并localStorage 里存的属性覆盖默认值没存的属性保留默认值数组覆盖给 deepmerge 传入了自定义arrayMerge回调overwriteMerge其实现只有一行——直接返回源数组即存储中的数组。 为什么数组要覆盖deepmerge 默认拼接的坑deepmerge 对数组的默认行为是把两边数组拼接先 destination 后 source。假设代码里的默认状态tabs: [1, 2]localStorage 里已存的快照tabs: [1, 2, 3]若按默认行为合并刷新后会得到[1, 2, 1, 2, 3]——列表凭空多出一堆重复项。而overwriteMerge让数组遵循最后一次写入获胜的语义存储是最新快照数组整体替换代码默认值得到干净的[1, 2, 3]。对象仍走深合并存的覆盖、没存的保留依然成立。这正是刷新后列表重复问题的根源也是默认策略要显式处理数组的原因。️ 如何写自定义 mergeReducer签名与常见场景配置接口中mergeReducer的类型定义在projects/lib/src/lib/index.ts#L375-L385mergeReducer?: (state: any, rehydratedState: any, action: any) any;state当前内存中的初始状态reducer 的默认状态rehydratedState按keys配置从 localStorage 读出的水合状态action当前动作可按动作类型分支处理返回值就是即将交给业务 reducer 的初始状态。常见使用场景部分覆盖只接受存储中的某些字段忽略其余混合策略某些 feature 全量深合并某些只取指定字段数据迁移合并阶段把旧版存储结构转换成新版结构。 实战示例按 feature 混合合并官方测试spec/index.spec.ts#L751-L800给出了典型示例feature1、feature2分片存储自定义合并函数对两者采用不同策略const mergeReducer (state, rehydratedState, action) ({ ...state, feature1: { slice11: rehydratedState.feature1.slice11 }, // 只取一个字段 feature2: deepmerge(state.feature2, rehydratedState.feature2), // 完整深合并 });配合localStorageSync({ keys: [...], rehydrate: true, mergeReducer })后最终状态里feature1只保留了存储值中的slice11feature2则完成了完整深合并。可见合并策略完全交给开发者字段挑选与deepmerge可以在同一应用里自由搭配。⚡ 总结合并策略速查清单不传mergeReducer默认策略 深合并 数组整体覆盖多数场景直接可用想精细控制恢复哪些字段传入自定义函数返回合并后的初始状态即可遇到恢复后数组重复检查是否误用了 deepmerge 的默认arrayMerge拼接合并只发生在 init / update-reducers 动作、且在业务 reducer 之前不会干扰后续任何 action。更多配置项说明可参考 README.md 中mergeReducer的官方描述第 98 行。【免费下载链接】ngrx-store-localstorageSimple syncing between ngrx store and local storage项目地址: https://gitcode.com/gh_mirrors/ng/ngrx-store-localstorage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 自定义合并策略：深入ngrx-store-localstorage的mergeReducer与deepmerge数组覆盖机制
自定义合并策略深入ngrx-store-localstorage的mergeReducer与deepmerge数组覆盖机制【免费下载链接】ngrx-store-localstorageSimple syncing between ngrx store and local storage项目地址: https://gitcode.com/gh_mirrors/ng/ngrx-store-localstoragengrx-store-localstorage 是面向 ngrx/store 的状态持久化插件负责在 NgRx 状态仓库与浏览器 localStorage 之间双向同步实现页面刷新后状态自动恢复。本文聚焦两个核心机制mergeReducer自定义合并策略以及默认合并中 deepmerge 的数组覆盖行为帮新手快速搞懂状态复活的完整链路。 先搞懂合并发生在哪localStorageSync 的三步包装加载localStorageSync配置后每个 action 都会先经过库的包装层再进入你的业务 reducer调用顺序在projects/lib/src/lib/index.ts#L336-L351用你的 reducer 算出默认状态得到nextState执行mergeReducer(nextState, rehydratedState, action)把从 localStorage 读出的水合状态合并进去合并结果再交给你的真实 reducer 产出最终状态。也就是说无论默认还是自定义合并策略都发生在业务 reducer 之前它决定的是 reducer 看到的初始状态。⚙️ 默认合并策略deep merge 深合并 数组覆盖不传mergeReducer时库自动使用内置的defaultMergeReducer源码见projects/lib/src/lib/index.ts#L277-L299三个关键点时机仅当 action 为ngrx/store/init或ngrx/store/update-reducers时才合并其余动作原样放行方式调用deepmerge做深合并——对象逐键合并localStorage 里存的属性覆盖默认值没存的属性保留默认值数组覆盖给 deepmerge 传入了自定义arrayMerge回调overwriteMerge其实现只有一行——直接返回源数组即存储中的数组。 为什么数组要覆盖deepmerge 默认拼接的坑deepmerge 对数组的默认行为是把两边数组拼接先 destination 后 source。假设代码里的默认状态tabs: [1, 2]localStorage 里已存的快照tabs: [1, 2, 3]若按默认行为合并刷新后会得到[1, 2, 1, 2, 3]——列表凭空多出一堆重复项。而overwriteMerge让数组遵循最后一次写入获胜的语义存储是最新快照数组整体替换代码默认值得到干净的[1, 2, 3]。对象仍走深合并存的覆盖、没存的保留依然成立。这正是刷新后列表重复问题的根源也是默认策略要显式处理数组的原因。️ 如何写自定义 mergeReducer签名与常见场景配置接口中mergeReducer的类型定义在projects/lib/src/lib/index.ts#L375-L385mergeReducer?: (state: any, rehydratedState: any, action: any) any;state当前内存中的初始状态reducer 的默认状态rehydratedState按keys配置从 localStorage 读出的水合状态action当前动作可按动作类型分支处理返回值就是即将交给业务 reducer 的初始状态。常见使用场景部分覆盖只接受存储中的某些字段忽略其余混合策略某些 feature 全量深合并某些只取指定字段数据迁移合并阶段把旧版存储结构转换成新版结构。 实战示例按 feature 混合合并官方测试spec/index.spec.ts#L751-L800给出了典型示例feature1、feature2分片存储自定义合并函数对两者采用不同策略const mergeReducer (state, rehydratedState, action) ({ ...state, feature1: { slice11: rehydratedState.feature1.slice11 }, // 只取一个字段 feature2: deepmerge(state.feature2, rehydratedState.feature2), // 完整深合并 });配合localStorageSync({ keys: [...], rehydrate: true, mergeReducer })后最终状态里feature1只保留了存储值中的slice11feature2则完成了完整深合并。可见合并策略完全交给开发者字段挑选与deepmerge可以在同一应用里自由搭配。⚡ 总结合并策略速查清单不传mergeReducer默认策略 深合并 数组整体覆盖多数场景直接可用想精细控制恢复哪些字段传入自定义函数返回合并后的初始状态即可遇到恢复后数组重复检查是否误用了 deepmerge 的默认arrayMerge拼接合并只发生在 init / update-reducers 动作、且在业务 reducer 之前不会干扰后续任何 action。更多配置项说明可参考 README.md 中mergeReducer的官方描述第 98 行。【免费下载链接】ngrx-store-localstorageSimple syncing between ngrx store and local storage项目地址: https://gitcode.com/gh_mirrors/ng/ngrx-store-localstorage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考