[react] redux persist

새로고침 후에도 리덕스의 데이터를 유지하는 방법 📕

Redux-persist

---

Redux-persist는 localStorage 또는 sessionStorage에 redux state를 저장하여 새로고침 후에도 redux데이터가 유지되는 기능이다.

사용하기

---

• 설치하기

  ```bash yarn add redux redux-persist

• reducer에 persist store 정의

  import { createStore } from 'redux'
  import { persistStore, persistReducer } from "redux-persist";
  import storage from "redux-persist/lib/storage"
    
  import REDUCER_NAME from 'REDUCER_PATH'
  import REDUCER_NAME from 'REDUCER_PATH'
    
  const persistConfig = {
      key: 'root',
      storage: storage,
      whitelist: ['REDUCER_NAME']					  // 배열로 받은 reducer만 localStorage에 저장한다.
      // blacklist: ['REDUCER_NAME', 'REDUCER_NAME'] → 배열로 받은 reducer만 제외하고 localStorage에 저장한다.
  }
    
  export const rootReducer = {
      REDUCER_NAME: REDUCER_NAME,
      REDUCER_NAME: REDUCER_NAME
  }
    
  persistReducer = persistReducer(persistConfig, rootReducer);
    
  export default () => {
      const store = createStore(persistReducer);
  	const persistor = persistStore(store);
      return { store, persistor }
  }
  

  위 예제는 localStorage기준이며 sessionStorage를 사용할 경우 import storageSession from 'redux-persist/lib/storage/session 를 사용한다.

• persist store index.js 등록

  ※ 일반 Redux에서 추가된 부분만 기재함

  // index.js
  import { PersistGate } from "redux-persist/integration/react";
  import { store, persistor } from './redux/config/configStore';
    
  root.render(
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
      <App />
      </PersistGate>
    </Provider>
  );
  

출처

• https://www.npmjs.com/package/redux-persist
• https://kyounghwan01.github.io/blog/React/redux/redux-persist/#persist-store-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC