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

사용자가 로그인을 완료한 후 서버는 사용자 정보를 응답으로 수신하고 클라이언트는 이 값을 저장소에 저장하고 필요할 때 검색할 수 있습니다.

redux-persist 설치

npm i redux-persist
yarn add redux-persist

영구 스토리지 정의

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>
);

직렬화할 수 없는 값 오류

직렬화는 redux에서 값을 교환할 때 객체 유형 값을 문자열 유형으로 변환하는 것을 말합니다.

Redux 미들웨어는 파견된 액션이 리듀서에 도달하기 전에 중간 영역에서 사용자의 목적에 맞게 기능을 확장할 수 있도록 도와줍니다.

기본 미들웨어(getDefaultMiddleware)는 직렬화 가능성 검사(직렬화할 수 없는 객체가 수신되면 오류 발생)이는 redux-persist가 수행해야 하는 작업과 충돌합니다!
!
(아마 아닐꺼야..)

인용하다

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

직렬화할 수 없는 값 오류 문제 #988 rt2zz/redux-persist

안녕하세요 여러분 , 아직 초기 단계에 있는 프로젝트에 redux-persist를 설치했는데 페이지가 로드될 때 처음으로 콘솔에 이 오류 메시지가 표시됩니다.

외에는 별로 안했는데…

github.com

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

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

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

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