Next.js에서 Recoil 영구화

로그인 인증 여부의 판별을 Recoil에 저장하고 지속할 때의 설명

Recoil-perrsist 라이브러리를 영구적으로 사용

원래 설치된 Recoil의 버전은 v0입니다.6.1입니다. 하지만 리코럴-perrsist를 설치하면 오류가 발생했습니다. v0.5.2로 다시 설치하면 됩니다.

npm install recoil@0.5.2 

npm install recoil-persist

Recoil Root에서 wrap을 하는 곳.

Recoil을 사용할 때는 Recoil Root으로 전체를 랩합니다.
Next.js면 ‗app.tsx로 둘러싸면 돼요.

Atom 설정

이제 아톰 준비해.이번에 인증이 완료되었는지는 boolean에서 판정합니다.

import { atom } from "recoil";

export const isAuthenticatedState = atom({
	key: "isAuthenticatedState",
	default: false
});

Session에 저장

영구화하려면 다음 코드를 추가하십시오.보통 recoilPersist(); 이면 local Strage에 수치가 저장됩니다.
이번에는 세션 페이지에 저장해 보려고요.이 경우recoilPersist(); 매개변수에 다음 객체를 전달합니다.

import { atom } from "recoil";
import { recoilPersist } from "recoil-persist"; //追加

const { persistAtom } = recoilPersist({　//追加
	key: "recoil-persist",
	storage: sessionStorage
});

export const isAuthenticatedState = atom({
	key: "isAuthenticatedState",
	default: false,
	effects_UNSTABLE: [persistAtom]　//追加
});

오류 발생

Next .js라면 서버 쪽에서 렌더링을 하기 때문에 이렇게 욕을 먹습니다.
서버 측에서 스토어가 없다고 합니다.
조사한 후에 참고할 만한 보도가 있다.
Next.js를 사용할 때 Recoil-perrsist의 Storage 변경
문장에 코드를 배우고 수정하다.

import { atom } from "recoil";
import { recoilPersist } from "recoil-persist";

const { persistAtom } = recoilPersist({
	key: "recoil-persist",
	storage: typeof window === "undefined" ? undefined : sessionStorage　//修正
});

export const isAuthenticatedState = atom({
	key: "isAuthenticatedState",
	default: false,
	effects_UNSTABLE: [persistAtom]
});

저장할 수 있습니다.

감상

몇 개가 막혔지만 리코일에서의 지속성은 간단했다.
recoil-perrsist를 설치하지 못했을 때 급해서...