angular-ngrx-data进阶技巧乐观保存、EntityChangeTracker变更跟踪与一键Undo的3种姿势【免费下载链接】angular-ngrx-dataAngular with ngRx and experimental ngrx-data helper项目地址: https://gitcode.com/gh_mirrors/an/angular-ngrx-data做 Angular 应用时ngrx-data是 ngRx 生态里管理实体缓存EntityCache的利器。但很多人只用到查询 保存却忽略了它三大进阶能力乐观保存Optimistic Save、EntityChangeTracker 变更跟踪以及基于变更状态的一键Undo 回退。本文带你一次搞懂这三者的原理与用法让你的 CRUD 应用告别保存转圈等待还多一个后悔药。一、乐观保存快速上手先改缓存后存服务器 悲观 vs 乐观差别在哪里默认情况下ngrx-data 的保存是**悲观Pessimistic**的先请求服务器收到成功响应后才更新缓存。界面需要转圈、需要加保存中遮罩还要处理各种竞态条件。而**乐观保存Optimistic Save**则反其道而行——先把实体写进缓存或删除出缓存再异步发 HTTP 请求。监听选择器的组件立刻能看到变化用户体验丝滑得多。下图展示了 ngrx-data 中一次保存的完整数据流View 发出 EntityAction经 EntityReducer 写入 EntityCacheEntityEffects 负责向服务器发起 HTTP 请求并回传结果3种开启乐观保存的姿势姿势 1单次调用时传入isOptimistic选项Dispatcher 的add、update、delete、upsert方法都接受一个options参数传入{ isOptimistic: true }即可让这一次操作以乐观方式执行heroService.add(hero, { isOptimistic: true });姿势 2修改全局默认值每个 Dispatcher 的类型级默认值定义在 entity-dispatcher-default-options.ts 中。ngrx-data 的默认策略是操作默认是否乐观add()❌ 悲观update()❌ 悲观upsert()❌ 悲观delete()✅ 乐观可以看到删除默认就是乐观的——UI 上实体立即消失体验更好。你可以用EntityDispatcherDefaultOptions提供覆盖这些默认值。姿势 3批量保存saveEntities指定isOptimisticv6.1 起多实体批量保存是一等公民。entity-cache-dispatcher.ts 中的saveEntities(changeSet, url, options)接受包含ChangeSet增/删/改/合并多类实体的变更集第三个参数同样支持isOptimisticcacheDispatcher.saveEntities(changeSet, saveUrl, { isOptimistic: true });乐观批量保存时EntityCacheReducer会在发出请求前就把变更应用到缓存若服务器返回204 No Content还会自动清除各集合的 loading 标记。详细机制见 docs/save-entities.md。⚠️重要提醒ngrx-data不会自动回滚失败的乐观保存。这正是下一节变更跟踪登场的原因。二、EntityChangeTracker谁动了我的实体changeState实体的变更状态表ngrx-data 用每个实体集合中的changeState属性跟踪尚未保存到服务器的变更。它是一个主键 → 变更状态的映射interface ChangeStateT { changeType: ChangeType; // Added / Updated / Deleted originalValue: T | undefined; // 服务器上的最后已知值 }关键规则只有变更过的实体才入表。查不到某实体 它处于Unchanged状态originalValue保存的是服务器最后确认的值Undo 的回退依据就是它乐观保存类操作SAVE_*_OPTIMISTIC和缓存操作ADD_ONE、REMOVE_MANY、UPDATE_ONE等都会把实体登记进changeState保存成功*_SUCCESS或 commit/undo 操作会把实体从表中移除。核心实现位于 entity-change-tracker-base.ts完整规则见 docs/entity-change-tracker.md。按需关闭变更跟踪整集合关闭在实体元数据中设置enableChangeTracking: false单操作关闭使用以_NO_TRACK结尾的操作变体如ADD_ONE_NO_TRACK、UPDATE_ONE_NO_TRACK适合纯本地缓存、无需与服务器对账的场景。三、一键Undo的3种姿势后悔药怎么吃姿势 1UNDO_ONE精准撤销单个实体保存失败时对指定实体派发UNDO_ONE动作它会把该实体按changeState记录回退到服务器最后已知状态。姿势 2UNDO_MANY批量撤销多个实体载荷为实体 ID 数组一次撤销一批变更适合这一批提交都失败了的场景。姿势 3UNDO_ALL全量回滚把集合中changeState里所有未保存变更一次性回退是乐观批量保存失败时的保命操作。回退规则速查表changeTypeUndo 行为Added直接从集合中移除并丢弃服务器本来就没有它Deleted把originalValue放回集合排序集合会插回正确位置Updated用originalValue覆盖为旧值 两个注意点① Undo不是自动的——ngrx-data 把保存失败后怎么办的决定权交给你由你在错误处理中决定是否派发UNDO_*② 若实体的 ID 不在changeState表中Undo 动作会被静默忽略。相关操作定义在 entity-op.tsreducer 侧的对应处理在 entity-collection-reducer-methods.ts。四、避坑清单与最佳实践乐观保存的实体必须自带主键——缓存先要定位实体服务器才来得及分配 ID 就来不及了想中途取消保存用cancel(correlationId)派发取消动作基于 correlationId 匹配但注意它只能阻止服务器响应再写入缓存无法通知服务器已发出的请求服务器若不返回数据用204 No Content应答可省带宽ngrx-data 会自动派生成功动作批量保存的事务性依赖服务器客户端只保证成功结果一次性全量合入缓存失败则缓存不被触碰乐观场景除外更深的架构原理可查阅 docs/architecture.md 与 docs/extension-points.md。总结ngrx-data 的进阶玩法可以浓缩为一句话乐观保存换取丝滑体验EntityChangeTracker 记住每个变更的原值UNDO_ONE / UNDO_MANY / UNDO_ALL 三种姿势随时兜底。三者配合你的 Angular 实体应用既能秒改又不失秒悔。【免费下载链接】angular-ngrx-dataAngular with ngRx and experimental ngrx-data helper项目地址: https://gitcode.com/gh_mirrors/an/angular-ngrx-data创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 angular-ngrx-data进阶技巧：乐观保存、EntityChangeTracker变更跟踪与一键Undo的3种姿势
angular-ngrx-data进阶技巧乐观保存、EntityChangeTracker变更跟踪与一键Undo的3种姿势【免费下载链接】angular-ngrx-dataAngular with ngRx and experimental ngrx-data helper项目地址: https://gitcode.com/gh_mirrors/an/angular-ngrx-data做 Angular 应用时ngrx-data是 ngRx 生态里管理实体缓存EntityCache的利器。但很多人只用到查询 保存却忽略了它三大进阶能力乐观保存Optimistic Save、EntityChangeTracker 变更跟踪以及基于变更状态的一键Undo 回退。本文带你一次搞懂这三者的原理与用法让你的 CRUD 应用告别保存转圈等待还多一个后悔药。一、乐观保存快速上手先改缓存后存服务器 悲观 vs 乐观差别在哪里默认情况下ngrx-data 的保存是**悲观Pessimistic**的先请求服务器收到成功响应后才更新缓存。界面需要转圈、需要加保存中遮罩还要处理各种竞态条件。而**乐观保存Optimistic Save**则反其道而行——先把实体写进缓存或删除出缓存再异步发 HTTP 请求。监听选择器的组件立刻能看到变化用户体验丝滑得多。下图展示了 ngrx-data 中一次保存的完整数据流View 发出 EntityAction经 EntityReducer 写入 EntityCacheEntityEffects 负责向服务器发起 HTTP 请求并回传结果3种开启乐观保存的姿势姿势 1单次调用时传入isOptimistic选项Dispatcher 的add、update、delete、upsert方法都接受一个options参数传入{ isOptimistic: true }即可让这一次操作以乐观方式执行heroService.add(hero, { isOptimistic: true });姿势 2修改全局默认值每个 Dispatcher 的类型级默认值定义在 entity-dispatcher-default-options.ts 中。ngrx-data 的默认策略是操作默认是否乐观add()❌ 悲观update()❌ 悲观upsert()❌ 悲观delete()✅ 乐观可以看到删除默认就是乐观的——UI 上实体立即消失体验更好。你可以用EntityDispatcherDefaultOptions提供覆盖这些默认值。姿势 3批量保存saveEntities指定isOptimisticv6.1 起多实体批量保存是一等公民。entity-cache-dispatcher.ts 中的saveEntities(changeSet, url, options)接受包含ChangeSet增/删/改/合并多类实体的变更集第三个参数同样支持isOptimisticcacheDispatcher.saveEntities(changeSet, saveUrl, { isOptimistic: true });乐观批量保存时EntityCacheReducer会在发出请求前就把变更应用到缓存若服务器返回204 No Content还会自动清除各集合的 loading 标记。详细机制见 docs/save-entities.md。⚠️重要提醒ngrx-data不会自动回滚失败的乐观保存。这正是下一节变更跟踪登场的原因。二、EntityChangeTracker谁动了我的实体changeState实体的变更状态表ngrx-data 用每个实体集合中的changeState属性跟踪尚未保存到服务器的变更。它是一个主键 → 变更状态的映射interface ChangeStateT { changeType: ChangeType; // Added / Updated / Deleted originalValue: T | undefined; // 服务器上的最后已知值 }关键规则只有变更过的实体才入表。查不到某实体 它处于Unchanged状态originalValue保存的是服务器最后确认的值Undo 的回退依据就是它乐观保存类操作SAVE_*_OPTIMISTIC和缓存操作ADD_ONE、REMOVE_MANY、UPDATE_ONE等都会把实体登记进changeState保存成功*_SUCCESS或 commit/undo 操作会把实体从表中移除。核心实现位于 entity-change-tracker-base.ts完整规则见 docs/entity-change-tracker.md。按需关闭变更跟踪整集合关闭在实体元数据中设置enableChangeTracking: false单操作关闭使用以_NO_TRACK结尾的操作变体如ADD_ONE_NO_TRACK、UPDATE_ONE_NO_TRACK适合纯本地缓存、无需与服务器对账的场景。三、一键Undo的3种姿势后悔药怎么吃姿势 1UNDO_ONE精准撤销单个实体保存失败时对指定实体派发UNDO_ONE动作它会把该实体按changeState记录回退到服务器最后已知状态。姿势 2UNDO_MANY批量撤销多个实体载荷为实体 ID 数组一次撤销一批变更适合这一批提交都失败了的场景。姿势 3UNDO_ALL全量回滚把集合中changeState里所有未保存变更一次性回退是乐观批量保存失败时的保命操作。回退规则速查表changeTypeUndo 行为Added直接从集合中移除并丢弃服务器本来就没有它Deleted把originalValue放回集合排序集合会插回正确位置Updated用originalValue覆盖为旧值 两个注意点① Undo不是自动的——ngrx-data 把保存失败后怎么办的决定权交给你由你在错误处理中决定是否派发UNDO_*② 若实体的 ID 不在changeState表中Undo 动作会被静默忽略。相关操作定义在 entity-op.tsreducer 侧的对应处理在 entity-collection-reducer-methods.ts。四、避坑清单与最佳实践乐观保存的实体必须自带主键——缓存先要定位实体服务器才来得及分配 ID 就来不及了想中途取消保存用cancel(correlationId)派发取消动作基于 correlationId 匹配但注意它只能阻止服务器响应再写入缓存无法通知服务器已发出的请求服务器若不返回数据用204 No Content应答可省带宽ngrx-data 会自动派生成功动作批量保存的事务性依赖服务器客户端只保证成功结果一次性全量合入缓存失败则缓存不被触碰乐观场景除外更深的架构原理可查阅 docs/architecture.md 与 docs/extension-points.md。总结ngrx-data 的进阶玩法可以浓缩为一句话乐观保存换取丝滑体验EntityChangeTracker 记住每个变更的原值UNDO_ONE / UNDO_MANY / UNDO_ALL 三种姿势随时兜底。三者配合你的 Angular 实体应用既能秒改又不失秒悔。【免费下载链接】angular-ngrx-dataAngular with ngRx and experimental ngrx-data helper项目地址: https://gitcode.com/gh_mirrors/an/angular-ngrx-data创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考