redux-persist 적용 (feat. react, redux-toolkit)

 

 

🤯 유저가 로그인을 완료하게 되면 서버로부터 유저의 정보가 response로 들어오게 되고 클라이언트에서는 이 값을 store에 저장해서 필요 시에 꺼내 쓸 수 있는데, 기존의 store는 새로고침 시 초기화되는 정보이므로 이를 해결해 주어야 한다.

 

redux-persist 설치

npm i redux-persist
yarn add redux-persist

 

persist store 정의

store.tsx

import { combineReducers, configureStore } from "@reduxjs/toolkit";
import { useDispatch, useSelector } from "react-redux";
import storage from "redux-persist/lib/storage";
import { persistReducer } from "redux-persist";
.
.
.
import userSlice from "./modules/user";

const reducers = combineReducers({
.
.
.
    user: userSlice.reducer,
});

// config 작성
const persistConfig = {
    key: "root",
    storage, // 로컬 스토리지에 저장
    whitelist: ["user"],
};

const persistedReducer = persistReducer(persistConfig, reducers);

const store = configureStore({
    reducer: persistedReducer,
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = () => useDispatch();
export const useAppSelector = useSelector;

export default store;

 

main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "/src/styles/main.css";
import { Provider } from "react-redux";
import store from "./store/store";

import { persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";
export const persistor = persistStore(store);

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <App />
        </PersistGate>
    </Provider>
);

 

non-serializable value error

직렬화란 redux에서 값을 주고 받을 때 object 형태의 값을 string 형태로 변환하는 것을 말한다. 

리덕스 미들웨어는 dispatch 된 액션이 리듀서에 도달하기 전 중간 영역에서 사용자의 목적에 맞게 기능을 확장할 수 있도록 돕는데, 기본 미들웨어 (getDefaultMiddleware)는 불변성 검사와 직렬화 가능성 검사(직렬화할 수 없는 객체를 받았을 때 error를 발생)를 제공하기 때문에 redux-persist가 해야 하는 일과 충돌이 생긴 것이다!! (인데 아닐 수도 잇음..)

 

refer

https://github.com/rt2zz/redux-persist/issues/988

non-serializable value error · Issue #988 · rt2zz/redux-persist

 

npm i @types/redux-logger
npm i redux-thunk

// 변경 전
middleware: (getDefaultMiddleware) => getDefaultMiddleware()

// 변경 후
const store = configureStore({
    reducer: persistedReducer,
    middleware: [thunk, logger],
});

 

새로고침해도 초기화 안 되고 멋지게 잘 저장됨