Jotai

状態

原始和灵活的 React 状态管理

Next.js

Hydration

Jotai 使用 useHydrateAtoms 支持原子 Hydration。 hook 的文档可以在这里看到。这里.

与路由同步

可以将 Jotai 与路由同步。您可以使用 atomWithHash 实现这一点：

const pageAtom = atomWithHash("page", 1, {
  replaceState: true,
  subscribe: (callback) => {
    Router.events.on("routeChangeComplete", callback);
    window.addEventListener("hashchange", callback);
    return () => {
      Router.events.off("routeChangeComplete", callback);
      window.removeEventListener("hashchange", callback);
    };
  },
});

通过这种方式，您可以完全控制要订阅的路由事件。

您不能在服务器端渲染中返回 promises

重要的是要注意，您不能使用 SSR 返回 Promise，但是，可以在原子定义中防止它。

如果可能，使用 useHydrateAtoms 来混合来自服务器的值。

const postData = atom((get) => {
  const id = get(postId);
  if (isSSR || prefetchedPostData[id]) {
    return prefetchedPostData[id] || EMPTY_POST_DATA;
  }
  return fetchData(id); // returns a promise
});

Provider

由于 SSR 的性质，您的应用程序可以同时在 JS 内存中存在更多实例。您需要将您的应用程序包装在一个 Provider 中（查看更多详细信息在核心部分），以便每个实例都有自己的状态并且不会干扰以前的默认值 store（无提 provider 模式）。

SWC 插件

Jotai 在使用 Next.js 开发时提供了更好的 DX 的 SWC 插件。在 SWC 部分找到更多信息。

示例

Clock

HN Posts

Next.js repo

npx create-next-app --example with-jotai with-jotai-app
# or
yarn create next-app --example with-jotai with-jotai-app

这是一个链接.

JotaiJotai

Next.js

Jotai