유저가 로그인을 완료하게 되면 로그인한 유저의 정보를 전역 상태관리를 통해서 다른 컴포넌트에서 사용할 수 있도록 전해줘야 하는데, 정보가 저장되어도 새로고침 시 유저의 정보가 다시 날라가는 문제가 있었다. 이를 해결하기 위해서 유저의 정보를 유지할 수 있도록 redux-persist를 활용해 유저의 정보를 localStorage에 저장하게 되었다.
npm i redux-persist
yarn add redux-persist
redux/store/store.js 파일에 redux-persist에서 필요한 요소들과,
storage를 import해준다.
import {
persistStore,
persistReducer,
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
} from "redux-persist";
import storage from "redux-persist/lib/storage";
import storage from 'redux-persist/lib/storage
import storageSession from 'redux-persist/lib/storage/session
const persistConfig = {
key: 'root',
version: 0,
storage,
}
const rootReducer = combineReducers({
listReducer: ListSlice.reducer,
userReducer: UserSlice.reducer,
})
const persistedReducer = persistReducer(persistConfig, rootReducer)
const store = configureStore({
reducer: {
persistedReducer
},
middleware: getDefaultMiddleware({
serializableCheck: {
ignoreActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
}
})
});
export const persistor = persistStore(store);
src/redux/store/store.js 파일 전체코드
import {
configureStore,
combineReducers,
getDefaultMiddleware
} from "@reduxjs/toolkit";
import {
persistStore,
persistReducer,
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
} from "redux-persist";
import storage from "redux-persist/lib/storage";
import { ListSlice } from "../reducer/categoryList";
import { UserSlice } from "../reducer/userSlice";
const persistConfig = {
key: 'root',
version: 0,
storage,
}
const rootReducer = combineReducers({
listReducer: ListSlice.reducer,
userReducer: UserSlice.reducer,
})
const persistedReducer = persistReducer(persistConfig, rootReducer)
const store = configureStore({
reducer: {
persistedReducer
},
middleware: getDefaultMiddleware({
serializableCheck: {
ignoreActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
}
})
});
export const persistor = persistStore(store);
export default store;
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { PersistGate } from 'redux-persist/integration/react';
import store, {persistor} from "./redux/store/store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
</BrowserRouter>
);