redux-persist 사용 방법

redux-persist

redux + localstorge를 사용의 편의성을 향상을 위해 사용한다

 

적용전

*로그인시 로그인 정보 저장 기능

//Store.js

import { configureStore, createSlice } from "@reduxjs/toolkit";

let Id = createSlice({
  name: "Id",
  initialState: null,
  reducers: {
    changeId(state, action) {
      return action.payload;
    },
  },
});

export default configureStore({
  reducer: {
    userId: Id.reducer,
  },
});

export let { changeId } = Id.actions;

 

// LoginPage.js

import { changeId } from "../redux/store";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";

 let dispatch = useDispatch();
 
 // 저장할 정보
 let id = test
 
 // localStorge 저장
 localStorage.setItem("id", id);
 // localStorge 불러오기
 localStorage.getItem("fixedList")
 
 // redux에 id 저장
 dispatch(changeId(id));
 // redux에 저장된 userId 불러오기
 let id = useSelector((state) => state.userId); // 로그인한 유저 ID

 

 

 

적용 후 

// Store.js
import { combineReducers, configureStore } from "@reduxjs/toolkit";
import { persistReducer, persistStore, PURGE, PERSIST } from "redux-persist";
import storage from "redux-persist/lib/storage";

// 초기 사용자 정보
const initialUserState = {
  id: ""
};

// 사용자 정보를 업데이트하는 액션 타입 정의
const SET_USER = "SET_USER";
const CLEAR_USER = "CLEAR_USER";

// 사용자 정보를 업데이트하는 액션 생성자 함수
export const setUser = (userData) => ({
  type: SET_USER,
  payload: userData,
});

export const clearUser = () => ({
  type: CLEAR_USER,
});

// 리듀서
const userReducer = (state = initialUserState, action) => {
  switch (action.type) {
    case SET_USER:
      return {
        ...state,
        ...action.payload,
      };
    case CLEAR_USER:
      return initialUserState;
    default:
      return state;
  }
};

// Redux Persist 설정(저장할 데이터의 key값 지정)
const persistConfig = {
  key: "user",
  storage: storage,
};

// 사용자 정보 리듀서에 Redux Persist 적용
// 사용할 key와 Reducer를 넣어준다
const persistedUserReducer = persistReducer(persistConfig, userReducer);

// 루트 리듀서 정의 (만약 다른 리듀서들이 있다면 이 곳에 추가)
const rootReducer = combineReducers({
  user: persistedUserReducer,
  // 다른 리듀서 추가 가능
});

// Redux store 생성
export const store = configureStore({
  reducer: rootReducer,
});

// Redux store를 영속화하는 persistor 생성
export const persistor = persistStore(store);

 

*중요점

const persistConfig = {
  key: "user",
  storage: storage,
};

 

localStorage에 저장하고 싶으면 import storage from 'redux-persist/lib/storage'
session에 저장하고 싶으면 import storageSession from 'redux-persist/lib/storage/session'

 

*사용법

const sendSigninData = async (userData) => {
    const url = process.env.REACT_APP_BACKEND_URL + "members/login";
    let moveUrl = "/main";

    const response = await PostData(url, userData);
    const responseData = {
      id: response.data.id,
    };
	
    // 데이터 저장
    store.dispatch(setUser(responseData));

  };

 

*불러오기

import { store } from "../redux/store";

const userState = store.getState().user;
  console.log(userState.id);

 

불러오기 확인

localStorage 저장 확인