Next.js、Zustand 并从本地存储加载初始状态

Question

在我的 Zustand 存储中，我尝试从本地存储中保存的数据加载初始状态（我没有选择中间件，因为 Next 存在一些我不想处理的问题）：

const getInitialProject = (): Project => {
    const project = loadCurrentProjectFromLs()

    return (
        project ?? {
            projectName: '',
            cards: [],
        }
    )
}

const useProjectStore = create<ProjectStore>((set, get) => ({
    ...getInitialProject(),
...

但是页面的第一次渲染是在服务器上完成的，而不是在客户端上完成的（在React和Next.js构造函数中，我收到“引用错误：本地存储未定义”），这意味着本地存储不可访问那时。

这意味着我的代码无法正常工作，因为状态只能在第一次渲染后更新，但导致 Zustand 初始化的钩子在第一次渲染期间被触发。

有没有比使用

useEffect

钩子更好的方法来解决这个问题，当 localStorage 变得可访问时，它会更新存储？我希望逻辑成为商店的一部分，而不是客户端，但我想不出比带有计时器的循环更好的东西......

Answer 1

您可以使用中间件来保持状态。尝试我为解决类似问题而创建的 Persist 和 Sync 中间件。

安装

$ pnpm add persist-and-sync
# or
$ npm install persist-and-sync
# or
$ yarn add persist-and-sync

只需将其添加到您的状态创建者

import { create } from "zustand";
import { persistNSync } from "persist-and-sync";

type MyStore = {
    count: number;
    set: (n: number) => void;
};

const useStore = create<MyStore>(
    persistNSync(
        set => ({
            count: 0,
            set: n => set({ count: n }),
        }),
        { name: "my-channel" },
    ),
);

⚡🎉繁荣！只需几行，您的状态就可以在选项卡/窗口之间完美同步，并且还可以使用 localStorage 进行持久化！