Recoil Sync 0.1

recoil-sync NPM 包的首次开源发布！Recoil Sync 提供了一个附加库，可以帮助将 Recoil 状态与外部系统同步。简单的异步数据查询可以通过选择器或useEffect()实现，或者使用原子效果来实现单个原子的双向同步。recoil-sync 附加包提供了一些额外的功能

• 原子事务批量处理 - 多个原子的更新可以作为单个事务与外部系统一起进行批量处理。如果需要原子事务来确保相关原子的状态一致，这一点很重要。
• 抽象和灵活 - 此 API 允许用户单独指定要同步的原子，而不必描述如何同步的机制。这使得组件可以在不同的环境中使用原子并与不同的系统同步，而无需更改其实现。例如，组件可以使用与 URL 持久化的原子，当在独立工具中使用时，而当嵌入在其他工具中时，则与自定义用户数据库持久化。
• 验证和向后兼容性 - 当处理来自外部来源的状态时，验证输入非常重要。当状态在应用程序生命周期之外持久化时，还需要考虑以前版本状态的向后兼容性。recoil-sync 和 refine 有助于提供此功能。
• 原子与外部存储的复杂映射 - 原子与外部存储项之间可能不存在一对一的映射。原子可能会迁移到使用较新的项目版本，可能会从多个项目中提取属性，只是某个复合状态的一部分，或者其他复杂的映射。
• 与 React Hooks 或 Props 同步 - 此库使能够将原子与无法从原子效果访问的 React Hooks 或 Props 同步。

recoil-sync 库还为外部存储提供了内置实现，例如与浏览器 URL 同步。

---

基本思想是，可以向每个要同步的原子添加syncEffect()，然后在您的<RecoilRoot>中添加<RecoilSync> 来指定如何同步这些原子。您可以使用内置存储，例如 <RecoilURLSyncJSON>，创建自己的存储，甚至用不同的存储同步不同组的原子。

示例

URL 持久化

这是一个将原子与浏览器 URL 同步 的简单示例

const currentUserState = atom<number>({
  key: 'CurrentUser',
  default: 0,
  effects: [
    syncEffect({ refine: number() }),
  ],
});

然后，在应用程序的根目录，只需包含<RecoilURLSyncJSON> 即可将所有这些标记的原子与 URL 同步

function MyApp() {
  return (
    <RecoilRoot>
      <RecoilURLSyncJSON location={{part: 'queryParams'}}>
        ...
      </RecoilURLSyncJSON>
    </RecoilRoot>
  )
}

就是这样！现在，这个原子将在初始加载期间根据 URL 初始化其状态，任何状态变动都将更新 URL，而 URL 的变化（例如后退按钮）将更新原子。在同步效果、存储实现 和URL 持久化 指南中查看更多示例。