리덕스에서 리코일로

프로젝트에서 기존에 상태관리를 위해 써왔던것은 리덕스 입니다.
그러나 저희 프로젝트에는 아직 대규모로 진행 하지 않았고
불필요한 보일러 플레이트가 많은 리덕스보다는 리코일을 사용이 더 적합해서
사실 내가 너무 써보고 싶었음

기존에 사용했던 로그인 관련 상태 관리 리덕스

import { createSlice } from "@reduxjs/toolkit";
import { getCookie } from "../../utils/cookieUtils";

  function deleteCookie(name: string) {
    document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
  }

const accessToken = getCookie("access_token");


const initialState = {
  isLogin: !!accessToken,
};

const isLoginSlice = createSlice({
  name: "isLogin",
  initialState,
  reducers: {
    logIn: (state) => {
        state.isLogin = true;
    },
    logOff: (state) => {
        state.isLogin = false;
        deleteCookie("access_token"); // 엑세스 토큰 삭제
        deleteCookie("refresh_token"); // 리프레쉬 토큰 삭제
        deleteCookie("nickname"); // 닉네임 삭제
        deleteCookie("emoticon"); // 이모티콘 삭제
        deleteCookie("email"); // 이메일 삭제

    },
  },
});

export const { logIn, logOff } = isLoginSlice.actions;
export default isLoginSlice.reducer;

그리고 아톰으로 저장하여 사용한 리코일 코드

import { atom, useRecoilState } from 'recoil';
import { getCookie } from '../utils/cookieUtils';


// 리덕스에서 사용했던 deleteCookie 함수를 그대로 사용합니다.
function deleteCookie(name: string) {
  document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
}

// access_token 쿠키를 가져옵니다.
const accessToken = getCookie('access_token');

// Recoil 아톰(atom)을 사용하여 상태를 정의합니다.
export const isLoggedInState = atom({
  key: 'isLoggedInState',
  default: !!accessToken, // 기본값은 access_token 쿠키가 있을 경우 true, 없을 경우 false
});

// 리듀서 대신 Recoil 상태를 사용합니다.
export function useLoginStatus() {
  const [isLoggedIn, setIsLoggedIn] = useRecoilState(isLoggedInState);

  const logIn = () => {
    setIsLoggedIn(true);
  };

  const logOff = () => {
    setIsLoggedIn(false);
    // 쿠키 삭제 등의 작업을 수행합니다.
    deleteCookie('access_token');
    deleteCookie('refresh_token');
    deleteCookie('nickname');
    deleteCookie('emoticon');
    deleteCookie('email');
  };

  return { isLoggedIn, logIn, logOff };
}

이제 로그인 페이지에서

  const [isLoggedIn, setIsLoggedIn] = useRecoilState(isLoggedInState);

로그인을 상태를 useRecoilState를 사용해 업데이트 해주면 아톰에서 그걸 저장하고?

내가 사용하고 싶은 컨퍼넌트에서 useRecoilValue를 통해 사용 해주면 된다.

  const isLoggedIn = useRecoilValue(isLoggedInState);

결과

너무나 편함!!!