跳转到主要内容

开发工具

Recoil 允许你观察和更新 state 的变化。


重要提示

此 API 目前仍在开发中,且将会有所变化。敬请期待……


观察所有 state 变化

你可以使用一个钩子函数来订阅 state 的变化,例如 useRecoilSnapshot()useRecoilTransactionObserver_UNSTABLE() ,同时也能得到新的 state 的 Snapshot

Snapshot 后,你即可使用一些方法来查阅 state,例如 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>
);
}

按需观察 state 变化

或者,你可以使用 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 state,以匹配提供的 Snapshot。此示例展示的是维护 state 更改的历史记录以便回溯,并恢复先前的全局 state 的能力。

Snapshot 还提供了 getID() 方法。例如,可以使用它来帮助你确定是否正在还原到先前已知的 state,以避免更新你的快照历史记录。

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() 提供了一个回调函数,它可用于查看当前 state 以及获取 atom 和 selector 的信息。在大多数情况下,这等效于在当前 Snapshot 上调用 getInfo_UNSTABLE(),不同之处在于它能够提供一些可更改且与 Recoil state 快照无关的其他信息,例如订阅了 atom 的 React 组件集合。