Jotai

状態

原始和灵活的 React 状态管理

调试

在基本的应用程序中，console.log 可能是我们调试原子的最好朋友，但是当应用程序变得更大并且我们有更多的原子要使用时，日志记录就不是调试原子的好方法了。 Jotai 提供了两种调试原子的方式，React Dev Tools 和 Redux Dev tools。对于读取值和简单的调试，React Dev Tools 可能适合您，但对于时间旅行和设置值等更复杂的任务，Redux Dev Tools 将是更好的选择。

调试标签

值得一提的是，我们在 Jotai 中有一个叫做 Debug labels 的概念，可以帮助我们进行调试。默认情况下，每个 Jotai 状态都有像 1:<no debugLabel> 这样的标签，数字是自动分配给每个原子的内部 key。但是您可以为原子添加标签，以帮助您使用 debugLabel 更轻松地区分它们。

const countAtom = atom(0);
// countAtom 的 debugLabel 默认是 'atom1'
if (process.env.NODE_ENV !== "production") {
  countAtom.debugLabel = "count";
  // debugLabel 现在是 'count'
}

Jotai 提供了一个 Babel 和一个 SWC 插件，它会自动为每个原子添加一个 debugLabel，这使我们的事情变得更容易。有关详细信息，请查看 jotai/babel 和 @swc-jotai/debug -label

使用 React 开发工具

您可以使用 React 开发工具检查 Jotai 状态。实现 useDebugValue 在自定义 hook 中使用。请记住，它仅适用于开发模式（例如 NODE_ENV === 'development'）。

使用原子

useAtom 为原子值调用 useDebugValue，所以如果您在 React Dev Tools 中选择消耗 Jotai 原子的组件，您会看到组件中使用的每个原子的“Atom” hook 以及它现在具有的值 .

使用 AtomsDebugValue

useAtomsDebugValue 捕获 Provider 下的组件树中的所有原子（或无提供者模式下的整个树），并且 useDebugValue 用于所有原子值。如果您在 React Dev Tools 中导航到具有 useAtomsDebugValue 的组件，我们可以看到一个自定义 hook AtomsDebugValue，它允许您查看所有原子值及其依赖项。

一个用例是将 hook 放在 Provider 组件下面：

const DebugAtoms = () => {
  useAtomsDebugValue();
  return null;
};

const Root = () => (
  <Provider>
    <DebugAtoms />
    <App />
  </Provider>
);

使用 Redux 开发者工具

您还可以使用 Redux DevTools 检查原子，具有时间旅行和值分配等许多功能。

useAtomDevtools

useAtomDevtools 是一个 React hook，用于管理特定原子的 ReduxDevTools 集成。

如果您有一个特定的原子需要调试，useAtomDevtools 可能是一个不错的选择。

const countAtom = atom(0)
// 如果我们有更多原子，建议设置 countAtom.debugLabel

function Counter() {
  const [count, setCount] = useAtom(countAtom)
  useAtomDevtools(countAtom)

现在，如果我们尝试 setCount，我们可以看到 Redux 开发工具会立即记录这些更改。

时间旅行

有时我们需要切换到原子状态的特定值，通过时间旅行这是可能的。您可以将鼠标悬停在您在开发工具中看到的每个操作，并在那里看到 Jump 选项，单击它您就可以切换到该特定值。

暂停

如果我们不记录原子的变化，我们可以使用 Pausing 功能观察那些。

Dispatch

可以使用 Dispatch 功能在原子上设置值。您可以通过单击 Show Dispatcher 按钮来执行此操作。这会将 countAtoms 的值设置为 5。

我们应该注意，该值将由 JSON.parse 解析，因此请传递支持的值。

useAtomsDevtools

useAtomsDevtools 是 useAtomDevtools 的包罗万象的版本，它显示 store 中的所有原子，而不是显示特定的原子。

如果您想在一个地方跟踪所有原子，我们建议您使用这个 hook。这意味着放置在这个 hook 底部（在 React 树中）的每个原子上的每个动作都将被 Redux 开发工具捕获。

此 hook 支持 useAtomDevtools 的每个功能，但还有一个额外的功能，其中包括提供有关原子依赖项的更多信息，例如：

{
  "values": {
    "atom1:count": 0,
    "atom2:doubleCount": 0,
    "atom3:half": 0,
    "atom4:sum": 0
  },
  "dependents": {
    "atom1:count": ["atom1:count", "atom2:doubleCount", "atom4:sum"],
    "atom2:doubleCount": ["atom3:half", "atom4:sum"],
    "atom3:half": ["atom4:sum"],
    "atom4:sum": []
  }
}

冻结原子

为了找到你不小心试图改变存储在原子中的对象的错误，你可以使用 freezeAtom 或者 freezeAtomCreator 来自 jotai/utils 包。它返回用 Object.freeze 深度冻结的原子值。

JotaiJotai

调试

Jotai