zustand store의 값에 대해 서버사이드로 렌더링되는 값(초기 값)과, persist로 유지되는 값이 달라 에러 발생
hook을 만들어 데이터가 클라이언트 사이드에서 업데이트되도록 수정
주요 코드
store
import { create } from "zustand";
import { persist } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";
import { createUserSlice, userSliceType } from "./slices/user";
개요
발생한 이슈
주요 코드
export const useMainStore = create( persist( immer((set) => ({
...createUserSlice(set),
})),
{
name: "zustand-persist",
}
)
);
const Test = () => { const store = useStore(useMainStore, (state) => state); console.log(store);
return ( <div id="test" className="flex h-14 w-full items-center justify-center rounded-2xl bg-indigo-100 text-black" onClick={() => store!.setNickname(nanoid())}
export default Test;