开发工具

Recoil 具有允许您观察和更新状态更改的功能。

---

重要提示

此 API 目前正在开发中，可能会发生变化。请持续关注...

---

观察所有状态更改

您可以使用诸如 useRecoilSnapshot() 或 useRecoilTransactionObserver_UNSTABLE() 之类的挂钩来订阅状态更改并获取新状态的 快照。

获得 快照 后，您可以使用诸如 getLoadable()、getPromise() 和 getInfo_UNSTABLE() 之类的方法检查状态，并使用 getNodes_UNSTABLE() 迭代已知原子的集合。

function DebugObserver(): React.Node {
  const snapshot = useRecoilSnapshot();
  useEffect(() => {
    console.debug('The following atoms were modified:');
    for (const node of snapshot.getNodes_UNSTABLE({isModified: true})) {
      console.debug(node.key, snapshot.getLoadable(node));
    }
  }, [snapshot]);

  return null;
}

function MyApp() {
  return (
    <RecoilRoot>
      <DebugObserver />
      ...
    </RecoilRoot>
  );
}

按需观察状态更改

或者，您可以使用 useRecoilCallback() 挂钩按需获取 快照。

function DebugButton(): React.Node {
  const onClick = useRecoilCallback(({snapshot}) => async () => {
    console.debug('Atom values:');
    for (const node of snapshot.getNodes_UNSTABLE()) {
      const value = await snapshot.getPromise(node);
      console.debug(node.key, value);
    }
  }, []);

  return <button onClick={onClick}>Dump State</button>
}

时间旅行

可以使用 useGotoRecoilSnapshot() 挂钩将整个 Recoil 状态更新为与提供的 快照 相匹配。此示例维护状态更改的历史记录，并能够返回并恢复以前的全局状态。

快照 也提供 getID() 方法。例如，可以使用它来帮助确定您是否正在恢复到以前已知的状态，以避免更新您的快照历史记录。

function TimeTravelObserver() {
  const [snapshots, setSnapshots] = useState([]);

  const snapshot = useRecoilSnapshot();
  useEffect(() => {
    if (snapshots.every(s => s.getID() !== snapshot.getID())) {
      setSnapshots([...snapshots, snapshot]);
    }
  }, [snapshot]);

  const gotoSnapshot = useGotoRecoilSnapshot();

  return (
    <ol>
      {snapshots.map((snapshot, i) => (
        <li key={i}>
          Snapshot {i}
          <button onClick={() => gotoSnapshot(snapshot)}>
            Restore
          </button>
        </li>
      ))}
    </ol>
  );
}

检查当前状态

useGetRecoilValueInfo_UNSTABLE() 提供了一个回调，它可以用于查看当前状态并获取有关原子和选择器的信息。在大多数情况下，这等效于对当前 快照 调用 getInfo_UNSTABLE()，只是它可以提供其他信息，例如订阅原子的 React 组件集，这些组件可能会发生变化，并且不与 Recoil 状态的快照相关联。