⚡ Redux-persist

📌 소개

앞에서 간단하게 redux를 사용해서 로그인 기능을 구현했는데, 새로고침을 하니 redux 의 state 값이 초기화되는 문제가 발생했다. 검색해보니 redux-persist를 사용하면 새로 고침해도 정보가 남아있도록 할 수 있다고 해서 사용해 보았다.

localStorage 또는 sessionStorage에 저장하고자 하는 reducer state를 저장해서, 새로고침해도 저장 공간에 있는 데이터를 redux로 불러오는 형식으로 동작한다.

📌 설치

yarn add redux-persist

📌 사용

localStorage와 sessionStorage 둘 중 하나에 저장할 수 있는데,

localStorage에 저장하고 싶다면 import storage from ‘redux-persist/lib/storage 를 사용하고,

sessionStorage에 저장하고 싶으면 import storageSession from ‘redux-persist/lib/storage/session’ 를 사용하면 된다.

reducer/index.js

저장할 reducer와 storage 정보를 설정한다.

// third-party
import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
// import storageSession from 'redux-persist/lib/storage/session'; // session

// project import
import menu from './menu';
import user from './user';

const persistConfig = {
    key: 'root',
    storage,
    whitelist: ['user'] // 해당 reducer만 저장
    // blacklist: [''] // 해당 reducer만 제외
};

const reducers = combineReducers({ menu, user });

// export default reducers; // 기존 방식
export default persistReducer(persistConfig, reducers);

index.js

import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';

// third-party
import { Provider as ReduxProvider } from 'react-redux';
import { persistStore } from 'redux-persist'; // 추가
import { PersistGate } from 'redux-persist/integration/react'; // 추가

import { store } from 'store';
import reportWebVitals from './reportWebVitals';

const persistor = persistStore(store); // 추가

const container = document.getElementById('root');
const root = createRoot(container);
root.render(
    <ReduxProvider store={store}>
        <PersistGate loading={null} persistor={persistor}> {/* 추가 */}
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </PersistGate>
    </ReduxProvider>
);

과정이 간단해서 금방 따라했다. redux-persist를 사용하니 새로 고침해도 값이 잘 남아있었다.

---

참조
https://kyounghwan01.github.io/blog/React/redux/redux-persist/#%E1%84%89%E1%85%A9%E1%84%80%E1%85%A2-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%B2

https://velog.io/@soongle/Redux-persist-%EC%83%88%EB%A1%9C%EA%B3%A0%EC%B9%A8%ED%95%B4%EB%8F%84-store%EA%B0%92%EC%9D%B4-%EB%82%A8%EC%95%84%EC%9E%88%EA%B2%8C-%EB%8F%84%EC%99%80%EC%A3%BC%EB%8A%94-redux-persist-with-redux-toolkit