redux-persist

Redux store를 브라우저에서 기본적으로 제공해주는 저장소인 localstorage와 sessiongstorage에 저장하게 해주는 라이브러리이다.

// 설치
npm i redux-persist

// reducers/index.js
import { combineReducers } from "redux";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

import data from "./data";
import cart from "./cart";
import loading from "./loading";

const persistConfig = {
  key: "root",
  storage, // localStorage에 저장합니다.
};

export const rootReducer = combineReducers({
  data,
  cart,
  loading,
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
  reducer: { persist: persistedReducer },
  devTools: process.env.NODE_ENV !== 'production', 
});

export default store;

• persisConfig = {} : 새로운 persist 선언
• key : reducer의 어느 지점에서부터 데이터를 저장할 것 인지,
• storage : 웹의 localStorage
• persistReducer(persisConfig, reducer) : persisConfig가 추가된 reducer 반환

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

const persistor = persistStore(store);

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