如何安全试错 What-if 场景mobx-keystone 的 sandbox 与 draft 完整实战指南【免费下载链接】mobx-keystoneA MobX powered state management solution based on data trees with first class support for Typescript, support for snapshots, patches and much more项目地址: https://gitcode.com/gh_mirrors/mo/mobx-keystonemobx-keystone是一款基于数据树的 MobX 状态管理库除了模型、快照与补丁它还内置了两个被低估的安全网功能sandbox沙盒与draft草稿。前者让你在副本中大胆尝试如果……会怎样What-if而不影响真实状态后者让保存/重置式的表单编辑变得简单可靠。 为什么你需要 What-if 场景能力在日常开发中这类需求非常常见场景想要的效果用户点击添加商品前先验证加入后是否会产生校验错误但不真正加入设置表单用户可以随意修改点保存才生效点重置全部还原批量操作先模拟一遍操作结果确认无误再真正提交如果直接在真实状态上改一旦后悔就得手动回滚很容易写错。而 mobx-keystone 的思路是在一份与真实数据完全同步的副本上操作最后决定提交还是丢弃。这正是sandbox和draft的分工所在。 sandbox 沙盒可提交的临时实验场sandbox函数为某个子树创建一个沙盒管理器随后通过withSandbox在副本上执行任何 action回调返回true→ 沙盒内的所有改动被提交到原始状态回调返回false→ 所有改动整体回滚就像什么都没发生还可以返回{ commit: false, return: 某个值 }既丢弃改动又带走一份预演结果——这就是 What-if 的核心。举个经典例子模型里有个计算属性isValid我们想验证如果把值改成 2 是否合法但又不想真的改const isValid numSandbox.withSandbox([num], (numCopy) { numCopy.setValue(2) return { commit: false, return: numCopy.isValid } })整个过程原始数据纹丝不动你却拿到了真实状态下的校验结论。几个关键特性值得记住自动同步原始树变化时沙盒副本会自动跟进始终反映最新状态嵌套支持withSandbox可以套娃调用只有最外层决定是否提交异常安全回调中抛出错误时改动自动被拒绝不会留下半成品可识别用isSandboxedNode(node)可以判断一个节点是否处于沙盒中方便让某些reaction只在真实节点上运行记得释放沙盒用完后调用dispose()清理监听。 实现细节沙盒通过补丁patches机制追踪副本上的每一步变更提交时把它们应用到原树回滚时用逆补丁撤销——这也是为什么一次沙盒提交在 undo 中间件里只算一个撤销步骤。相关源码见 sandbox.ts。 draft 草稿为保存 / 重置而生的编辑副本如果说 sandbox 是一次性的实验那draft就是长期存在的编辑区。一次调用draft(originalObject)就能得到一个草稿对象它把最常见的表单需求全部封装好了成员作用data可编辑的草稿副本直接在上面调用 action 修改originalData原始对象引用方便对比commit()把草稿的全部改动提交到原对象点保存commitByPath(path)只提交指定路径的改动部分保存reset()丢弃改动草稿恢复为原对象的最新状态点重置resetByPath(path)只还原指定路径isDirty响应式布尔值草稿是否有未提交的改动isDirtyByPath(path)查询某个路径是否被修改过以偏好设置表单为例官方文档给出的思路非常清爽const preferencesDraft draft(myRootStore.preferences)然后把preferencesDraft.data传给表单组件保存按钮调commit()重置按钮调reset()。由于isDirty是一个计算值你可以用它驱动 UI没有改动时禁用保存按钮有改动时高亮重置按钮——不需要自己手写任何脏检查逻辑。 与 sandbox 不同reset()会以原对象当前的最新状态为基准重置。也就是说如果草稿打开期间原始数据被别的途径修改了重置后草稿会同步到最新值而不是回到创建草稿时的旧值。草稿的实现在 draft.ts它内部基于快照snapshot与深度比较实现isDirty判断。⚖️ sandbox 还是 draft一张表看懂怎么选维度sandboxdraft使用模式同步回调内完成结束即定去留长生命周期对象随时提交/重置典型场景What-if 预演、合法性验证设置表单、编辑器的未保存更改回滚方式回调返回false自动回滚手动调用reset()部分提交整个回调结果统一提交commitByPath支持按路径提交脏检查无需提交即结束isDirty/isDirtyByPath生命周期用完需dispose()无需显式销毁一句话总结先验后做选 sandbox边改边存选 draft。两者都位于 treeUtils 模块从mobx-keystone主包直接导入即可。 延伸阅读与源码位置想深入细节推荐按这个顺序看沙盒文档apps/site/docs/sandboxes.mdx含嵌套调用与多态校验的完整示例草稿文档apps/site/docs/drafts.mdx含设置表单的组件接线示范沙盒实现packages/lib/src/treeUtils/sandbox.ts补丁记录与逆补丁回滚草稿实现packages/lib/src/treeUtils/draft.ts快照对比与路径级提交沙盒行为测试packages/lib/test/treeUtils/sandbox.test.ts可以读到官方对边界行为的明确约定如withSandbox 执行期间原树不允许变化草稿行为测试packages/lib/test/treeUtils/draft.test.ts 小结sandboxwithSandbox在副本上大胆尝试返回true提交、返回false回滚还能顺手带回预演结果是 What-if 场景的瑞士军刀draft自带commit/reset/isDirty的可编辑草稿是设置表单这类保存/重置工作流的最佳拍档两者都建立在 mobx-keystone 的补丁与快照体系之上天然兼容 undo 中间件、只读保护等能力让你在单一数据源的纪律下依然拥有安全试错的自由。【免费下载链接】mobx-keystoneA MobX powered state management solution based on data trees with first class support for Typescript, support for snapshots, patches and much more项目地址: https://gitcode.com/gh_mirrors/mo/mobx-keystone创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何安全试错 What-if 场景：mobx-keystone 的 sandbox 与 draft 完整实战指南
如何安全试错 What-if 场景mobx-keystone 的 sandbox 与 draft 完整实战指南【免费下载链接】mobx-keystoneA MobX powered state management solution based on data trees with first class support for Typescript, support for snapshots, patches and much more项目地址: https://gitcode.com/gh_mirrors/mo/mobx-keystonemobx-keystone是一款基于数据树的 MobX 状态管理库除了模型、快照与补丁它还内置了两个被低估的安全网功能sandbox沙盒与draft草稿。前者让你在副本中大胆尝试如果……会怎样What-if而不影响真实状态后者让保存/重置式的表单编辑变得简单可靠。 为什么你需要 What-if 场景能力在日常开发中这类需求非常常见场景想要的效果用户点击添加商品前先验证加入后是否会产生校验错误但不真正加入设置表单用户可以随意修改点保存才生效点重置全部还原批量操作先模拟一遍操作结果确认无误再真正提交如果直接在真实状态上改一旦后悔就得手动回滚很容易写错。而 mobx-keystone 的思路是在一份与真实数据完全同步的副本上操作最后决定提交还是丢弃。这正是sandbox和draft的分工所在。 sandbox 沙盒可提交的临时实验场sandbox函数为某个子树创建一个沙盒管理器随后通过withSandbox在副本上执行任何 action回调返回true→ 沙盒内的所有改动被提交到原始状态回调返回false→ 所有改动整体回滚就像什么都没发生还可以返回{ commit: false, return: 某个值 }既丢弃改动又带走一份预演结果——这就是 What-if 的核心。举个经典例子模型里有个计算属性isValid我们想验证如果把值改成 2 是否合法但又不想真的改const isValid numSandbox.withSandbox([num], (numCopy) { numCopy.setValue(2) return { commit: false, return: numCopy.isValid } })整个过程原始数据纹丝不动你却拿到了真实状态下的校验结论。几个关键特性值得记住自动同步原始树变化时沙盒副本会自动跟进始终反映最新状态嵌套支持withSandbox可以套娃调用只有最外层决定是否提交异常安全回调中抛出错误时改动自动被拒绝不会留下半成品可识别用isSandboxedNode(node)可以判断一个节点是否处于沙盒中方便让某些reaction只在真实节点上运行记得释放沙盒用完后调用dispose()清理监听。 实现细节沙盒通过补丁patches机制追踪副本上的每一步变更提交时把它们应用到原树回滚时用逆补丁撤销——这也是为什么一次沙盒提交在 undo 中间件里只算一个撤销步骤。相关源码见 sandbox.ts。 draft 草稿为保存 / 重置而生的编辑副本如果说 sandbox 是一次性的实验那draft就是长期存在的编辑区。一次调用draft(originalObject)就能得到一个草稿对象它把最常见的表单需求全部封装好了成员作用data可编辑的草稿副本直接在上面调用 action 修改originalData原始对象引用方便对比commit()把草稿的全部改动提交到原对象点保存commitByPath(path)只提交指定路径的改动部分保存reset()丢弃改动草稿恢复为原对象的最新状态点重置resetByPath(path)只还原指定路径isDirty响应式布尔值草稿是否有未提交的改动isDirtyByPath(path)查询某个路径是否被修改过以偏好设置表单为例官方文档给出的思路非常清爽const preferencesDraft draft(myRootStore.preferences)然后把preferencesDraft.data传给表单组件保存按钮调commit()重置按钮调reset()。由于isDirty是一个计算值你可以用它驱动 UI没有改动时禁用保存按钮有改动时高亮重置按钮——不需要自己手写任何脏检查逻辑。 与 sandbox 不同reset()会以原对象当前的最新状态为基准重置。也就是说如果草稿打开期间原始数据被别的途径修改了重置后草稿会同步到最新值而不是回到创建草稿时的旧值。草稿的实现在 draft.ts它内部基于快照snapshot与深度比较实现isDirty判断。⚖️ sandbox 还是 draft一张表看懂怎么选维度sandboxdraft使用模式同步回调内完成结束即定去留长生命周期对象随时提交/重置典型场景What-if 预演、合法性验证设置表单、编辑器的未保存更改回滚方式回调返回false自动回滚手动调用reset()部分提交整个回调结果统一提交commitByPath支持按路径提交脏检查无需提交即结束isDirty/isDirtyByPath生命周期用完需dispose()无需显式销毁一句话总结先验后做选 sandbox边改边存选 draft。两者都位于 treeUtils 模块从mobx-keystone主包直接导入即可。 延伸阅读与源码位置想深入细节推荐按这个顺序看沙盒文档apps/site/docs/sandboxes.mdx含嵌套调用与多态校验的完整示例草稿文档apps/site/docs/drafts.mdx含设置表单的组件接线示范沙盒实现packages/lib/src/treeUtils/sandbox.ts补丁记录与逆补丁回滚草稿实现packages/lib/src/treeUtils/draft.ts快照对比与路径级提交沙盒行为测试packages/lib/test/treeUtils/sandbox.test.ts可以读到官方对边界行为的明确约定如withSandbox 执行期间原树不允许变化草稿行为测试packages/lib/test/treeUtils/draft.test.ts 小结sandboxwithSandbox在副本上大胆尝试返回true提交、返回false回滚还能顺手带回预演结果是 What-if 场景的瑞士军刀draft自带commit/reset/isDirty的可编辑草稿是设置表单这类保存/重置工作流的最佳拍档两者都建立在 mobx-keystone 的补丁与快照体系之上天然兼容 undo 中间件、只读保护等能力让你在单一数据源的纪律下依然拥有安全试错的自由。【免费下载链接】mobx-keystoneA MobX powered state management solution based on data trees with first class support for Typescript, support for snapshots, patches and much more项目地址: https://gitcode.com/gh_mirrors/mo/mobx-keystone创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考