Recoil 同步库

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

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

该 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 持久化 指南中查看更多示例。

安装

请参阅 Recoil 安装指南 并添加 recoil-sync 作为额外依赖项。

recoil-sync 还使用 refine 库进行类型细化和输入验证。