[Project] Agile 시스템 구축 - Redux-persist를 이용하여 JWT 토큰을 받아 로그인 상태 관리하는 방법(1)

지난 포스팅에 JWT 토큰을 이용하여

로그인 상태 관리에 대한 개념들을 알아보았고

이제 실제로 Redux-persist를 이용해 jwt 토큰을 받아

로그인 상태 관리를 하는 

코드를 작성해보았습니다.

---

솔직히 여러 코드를 찾아보고 적용해보고 

이게 맞나? 싶을 때가 너무 많아 

내가 잘 짜고 있는지도 모르겠고 

많은 것들을 import 해오면서 뭐가 뭔지

헷갈리고 얽히고 그랬었습니다..

하지만 이렇게 벽에 부딪히고 막히면 찾아보고

하는 과정에서 처음에는 뭔지 아예 모르겠던 

코드들이 그래 그래도 이건 이런 코드지 하면서

뭔가 트였다는 느낌이 들게된 게

속으로 그래도 실력이 좀 상승하고 있는건가..? 

하며 계속 공부해볼 수 있게 된 듯 합니다 ㅎㅎ

 

밑에는 제가 직접 짜보면서 적용했던 순서를 

나타내보았습니다.

---

우선, Redux-persist를 적용하는 순서는 다음과 같습니다.

 

1. TERMINAL 에서 'redux-persist'와 'redux-persist/lib/storage'  설치

npm install redux-persist
npm install redux-persist/lib/storage

 

2. Redux-persist를 사용하여 Redux store의 상태를 저장하고 관리하는,

액션에 따라 리듀서를 호출하여 업데이트 하고,

상태의 현재 값을 가져오는 등의 기능을 하는 Store.js 만들기 

 

import { persistReducer, persistStore } from "redux-persist";
import { createStore, combineReducers } from "redux";
import storage from "redux-persist/lib/storage"; // local storage 사용
import  persistedAuthReducer from "./reducers/AuthReducer"; 


// Redux store의 상태를 지속적으로 저장하고 관리하기 위한 설정 객체
const persistConfig = {
  key: "root", // 저장된 상태 객체에 대한 식별자
  storage: storage, // 저장소로 local storage 사용
};

// 루트 리듀서: 여러 개의 리듀서를 결합하여 Redux store의 상태를 관리
const rootReducer = combineReducers({
  Auth: persistedAuthReducer,
});

// persistReducer 함수를 사용하여 지속적인 상태 저장을 처리하는 새로운 리듀서를 생성
const persistedReducer = persistReducer(persistConfig, rootReducer);

// createStore 함수를 사용하여 Redux store를 생성
const store = createStore(
  persistedReducer, // persistReducer로 생성된 리듀서를 사용
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // Redux DevTools 활성화
);

// persistStore 함수를 사용하여 Redux store의 상태를 지속적으로 저장
const persistor = persistStore(store);

export { store, persistor };

 

우선 제가 짠 코드에 대한 전체적인 설명을 해보자면

rootReducer는 combineReducers 함수를 사용하여 루트 리듀서를 생성합니다. 

persistReducer 함수를 사용하여 persistConfig와 rootReducer를 인자로 받아,

지속적인 상태 저장을 처리하는 새로운 리듀서를 생성합니다.

createStore 함수를 사용하여 Redux store를 생성합니다. 

이때 persistedReducer로 생성된 리듀서를 사용하고, Redux DevTools를 활성화합니다.

persistStore 함수를 사용하여 Redux store의 상태를 지속적으로 저장합니다.

마지막으로, store와 persistor를 export하여 다른 파일에서 사용할 수 있도록 합니다.

이렇게 Redux store와 Redux-persist를 함께 사용하여 

애플리케이션의 상태를 지속적으로 저장하고 관리할 수 있습니다.

 

3. Store에서 사용되고 현재 상태와 액션을 기반으로 새로운 상태를 반환하는 Reducer.js를 만들기

import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { LOGIN_SUCCESS, LOGIN_FAILURE, LOGOUT } from "../../actions/authActionTypes";
import { setToken } from '../../path/to/setToken'; // setToken 함수를 import


// 초기 상태
const initialState = {
  token: null,
  error: null,
};

// 리듀서
const AuthReducer = (state = initialState, action) => {
  switch (action.type) {
    case LOGIN_SUCCESS:
      // 로그인 성공 시 토큰을 저장하고 에러를 초기화
      const { token } = action.payload; // 액션 페이로드에서 토큰 추출
      setToken(token); // setToken 함수를 호출하여 토큰 설정
      return {
        ...state,
        token: token, // 토큰을 상태에 저장
        error: null,
      };
    case LOGIN_FAILURE:
      // 로그인 실패 시 에러를 저장하고 토큰을 초기화
      const { error } = action.payload; // 액션 페이로드에서 에러 추출
      return {
        ...state,
        token: null,
        error: error, // 에러를 상태에 저장
      };
    case LOGOUT:
      // 로그아웃 시 토큰과 에러를 초기화
      return {
        ...state,
        token: null, // 토큰을 초기화
        error: null, // 에러를 초기화 
      };
    default:
      return state;
  }
};

// Redux-persist 설정 객체
const persistConfig = {
  key: "auth", // 저장된 상태 객체에 대한 식별자
  storage: storage, // 저장소로 local storage 사용
};

// persistReducer 함수를 사용하여 지속적인 상태 저장을 처리하는 새로운 리듀서를 생성
const persistedAuthReducer = persistReducer(persistConfig, AuthReducer);

export default persistedAuthReducer;

 

redux-persist를 사용하여 Redux store의 상태를

관리하는 코드입니다.

persistReducer 함수를 사용하여 지속적인 상태 저장을 처리하는 새로운 리듀서를 생성하고, 

storage 객체를 이용하여 로컬 스토리지에 상태를 저장합니다.

AuthReducer 함수는 초기 상태를 설정하고, 

LOGIN_SUCCESS, LOGIN_FAILURE, LOGOUT 액션에 따라 상태를 업데이트하는 리듀서입니다. 

LOGIN_SUCCESS 액션은 토큰을 추출하여 상태에 저장하고, 

LOGIN_FAILURE 액션은 에러를 추출하여 상태에 저장합니다. 

LOGOUT 액션은 토큰과 에러를 초기화하여 상태를 업데이트합니다.

persistConfig 객체는 redux-persist에서 사용하는 설정 객체로, 

key 속성은 저장된 상태 객체에 대한 식별자를 설정합니다.

최종적으로 persistReducer 함수를 사용하여 persistAuthReducer라는 새로운 리듀서를 생성

참고: https://github.com/rt2zz/redux-persist

GitHub - rt2zz/redux-persist: persist and rehydrate a redux store