Redux-persist 적용하기

Mimmel·2022년 12월 8일
0
post-thumbnail

redux-persist를 적용하게 된 이유

유저가 로그인을 완료하게 되면 로그인한 유저의 정보를 전역 상태관리를 통해서 다른 컴포넌트에서 사용할 수 있도록 전해줘야 하는데, 정보가 저장되어도 새로고침 시 유저의 정보가 다시 날라가는 문제가 있었다. 이를 해결하기 위해서 유저의 정보를 유지할 수 있도록 redux-persist를 활용해 유저의 정보를 localStorage에 저장하게 되었다.


1. redex-persist 설치하기

npm i redux-persist
yarn add redux-persist

2. store.js 파일에 redux-persist, storage import하기

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";
  • localStorage에 저장하고 싶다면 import storage from 'redux-persist/lib/storage
  • sessionStorage에 저장하고 싶다면 import storageSession from 'redux-persist/lib/storage/session

3. store에 저장될 개체구성을 생성해준다

const persistConfig = {
  key: 'root',
  version: 0,
  storage,
}

4. reducer들을 결합해준다

const rootReducer = combineReducers({
    listReducer: ListSlice.reducer,
    userReducer: UserSlice.reducer,
})

5. 결합한 combineReducer(rootReducer)을 persistReducer안에 넣어준다

const persistedReducer = persistReducer(persistConfig, rootReducer)

6. configureStore의 reducer안에 persistReducer를 넣어준다.

const store = configureStore({
    reducer: {
        persistedReducer
    },
    middleware: getDefaultMiddleware({
        serializableCheck: {
            ignoreActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
        }
    })
});
  • middle웨어 설정을 해주지 않으면 serializable 에러가 뜨기 때문에 미들웨어 설정을 통해
    무시해도 될 요소를 추가해준다.


7. persistStore를 생성해준다.

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;

8. src/index.js 파일에 PersistGate 래핑해준다.

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>
);
profile
인터랙션 디자인을 좋아하는 프론트엔드 디벨로퍼

0개의 댓글