JotaiJotai

状態
Primitive and flexible state management for 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

这是一个 链接.