[共感病棟プロジェクト]回復コイルによる状態管理

プロジェクトで使用するテクノロジースタックを決定する際に最も悩むのはステータス管理ライブラリです.従来のプロジェクトではredux-toolkitを用いていたが,共感病棟プロジェクトではuserのみがグローバル状態管理を行う必要があるため,より楽なライブラリを探すことにした.
さまざまな試行錯誤(実際には、プロジェクトの進行期間中、約2日間、チームメンバーと一緒にステータス管理を学ぶ...)最終的に選択されたのはRecoilです.
Recoil
1.理由を選ぶ
RTKより軽くて簡単!
前述したように、グローバルステータス管理の必要性が低いため、非常に軽いライブラリがほしいです.また、Recoilを知っているときには、使い方も簡単で、私たちのRecoilという時間帯にとっては、これが一番いい選択です.
2.応用
1)設置と使用
npm install recoil
インストールがオフになったらapp.すべてのコンポーネントをtsxでRecoilRootラベルで包みます.

//app.tsx
import type { AppProps } from "next/app";
import { RecoilRoot } from "recoil";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <RecoilRoot>
        <Component {...pageProps} />
    </RecoilRoot>
  );
}

export default MyApp;

2)原子の作成
atomはステータス(state)の一部を表します.管理するグローバルステータスはuserのみであるため、ファイル名をatomと名付けます.tsとして作成し,RecoilPersistを用いて値を記憶した.

// atom.ts
import { atom } from "recoil";
import { recoilPersist } from "recoil-persist";
const { persistAtom } = recoilPersist();

export const userState = atom({
  key: "userState",
  default: {
    accessToken: "",
    isLogin: false,
    description: "",
    id: 0,
    img: "",
    loginType: "",
    nickname: "",
    social_id: "",
    ...
  },
  effects_UNSTABLE: [persistAtom],
});

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

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

上記の方法で作成したatomは、必要に応じて各ページに必要な値を格納、ロード、および変更できます.
2)使用
(1)保存状態

import { useRecoilState, useSetRecoilState } from "recoil";
import { userState, loginModalState } from "../../state/atom";

...
const [isLoginModalOpen, setIsLoginModalOpen] =
	useRecoilState(loginModalState);
const setUser = useSetRecoilState(userState);

useEffect(() => {
  const login = async () => {
    if (code) {
      const userInfo = await socialLogin(code, state);
      setUser({ ...userInfo, isLogin: true });
      router.push("/");
    }
  };
  ...
  }, []);

上記のコードは、ログイン後のユーザー情報の格納プロセスを要約する完全なコードです.
要約すると、サーバから受信したユーザデータをsetUserを介してサーバに格納する.
isLoginをtrueに変換し、ログインを成功させます.
(2)ロード状態

//createPost
import { useRecoilValue } from "recoil";
import { userState } from "../../state/atom";

const { accessToken, id } = useRecoilValue(userState);

atomに格納されているユーザー情報は、他のページから取得および使用できます.
最も簡単な例は、投稿作成ページに、データパッチに必要なaccessTokenおよびid万が使用されていることです.
しっかり勉強する時間がないので、スピーディーな応用を実現するために、これからプロジェクトが終わったらよく勉強しなければなりません.