[Redux] redux persist 사용하기

새로고침을 하면 리덕스 store의 state가 날라가는 문제가 있었는데 redux persist 를 이용해서 문제를 해결할 수 있었다.
이 라이브러리를 사용하면 store의 state를 localstorage나 session에 저장해놓고 불러올 수 있어서, 새로고침을 해도 데이터가 사라지지 않았다.

기억보다 기록을 - redux-persist 사용법

사용방법은 위 블로그를 참고했다.

(1) 설치하기

yarn add redux-persist

(2) reducer에 적용하기

• localStorage에 저장하고 싶으면 import storage from 'redux-persist/lib/storage
• session Storage에 저장하고 싶으면 import storageSession from 'redux-persist/lib/storage/session
• persisConfig
  • key가 root로 되있으면 맨 윗쪽 파일부터 적용한다는 의미이다.
  • storage에 저장할 지, session에 저장할 지 정할 수 있다.
  • whitelist로 사용할 reducer를 넣는다. 해당 코드에서는 word 라는 이름으로 reducer들을 받아왔으므로 word를 사용하게 했다.
  • blacklist로 해당하는 reducer만 제외하고 사용하게 할 수 있다.

// configStore.js

import { createStore, combineReducers, applyMiddleware } from 'redux';
import word from './modules/word';
import thunk from "redux-thunk";
➊ import { persistReducer } from "redux-persist";
➋ import storage from "redux-persist/lib/storage";

➌ const persistConfig = {
    key: "root",
    storage,
    whitelist: ["word"]
};

// reducer를 뭉친것을 rootReducer 라고 정해준다.
// reducer는 여러개 있을 수 있으므로 하나로 뭉쳐주는 작업이다.
const rootReducer = combineReducers({ word });

// persistReducer와 reducer를 뭉쳐놓은 덩어리를 같이 합쳐준다.
➍ const perReducer = persistReducer(persistConfig, rootReducer);

// 뭉쳐진 리듀서들을 넣어서 스토어를 만들어준다.
// 리듀서뿐만 아니라 미들웨어나 필요한 것들도 같이 넣을 수 있다.
// 미들웨어 묶어주기
const middlewares = [thunk];
// 미들웨어를 하나씩 풀어서 넣어준다.
const enhancer = applyMiddleware(...middlewares);

// 리듀서+optional들을 넣어서 스토어를 만들어준다.
const store = createStore(perReducer, enhancer);


export default store;

(3) persist 가 적용된 store 적용하기

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './redux/configStore';
➊ import { persistStore } from "redux-persist";
➋ import { PersistGate } from "redux-persist/integration/react";

➌ const persistor = persistStore(store);

ReactDOM.render(
  <Provider store={store}>
  ➍ <PersistGate loading={null} persistor={persistor}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);