開發工具

Recoil 提供了讓你觀察和更新狀態變更的功能。

---

重要事項

此 API 目前正在開發中，並且會變更。敬請期待...

---

觀察所有狀態變更

你可以使用吊鉤，例如 useRecoilSnapshot() 或 useRecoilTransactionObserver_UNSTABLE() 來訂閱狀態變更，並取得新狀態的 Snapshot。

取得 Snapshot 之後，你可以使用的方法有 getLoadable()、getPromise() 和 getInfo_UNSTABLE() 來檢視狀態，並使用 getNodes_UNSTABLE() 來反覆運算已知 atom 的集合。

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() 來按需要取得 Snapshot。

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 狀態，以符合提供的 Snapshot。這個範例會保留狀態變更的歷史記錄，並有能力返回和還原先前的全域狀態。

Snapshot 還提供 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() 提供一個回呼函式，可以用來窺視目前的狀態並取得原子和選擇器的資訊。這在大部分的狀況下等於在目前的 Snapshot 上呼叫 getInfo_UNSTABLE()，但它可提供一些額外的資訊，例如一組訂閱原子的 React 元件，它會變更，且與 Recoil 的狀態快照無關聯性。