1. 사용하는 이유 Redux의 store는 페이지를 새로고침 할 경우 state가 날아감 Redux-Persist는 localStorage 처럼 state를 저장할 수 있음

2. 방식 localStorage또는 session에 저장하고자 하는 reducer state를 저장하여, 새로고침하여도 저장공간에 있는 데이터를 redux에 불러오는 형식으로 이루어짐

3. 설치

npm install redux-persist

1. persist store 정의

reducer에 persist store를 정의함

// reducers/index.tsx

import {persistReducer} from 'redux-persist';
import storage from 'redux-persist/lib/storage'; 
// localStorage에 저장
import sessionstorage from 'redux-persist/lib/storage/session' 
// sessionStorage에 저장

import modalreducer from './modal';
import loginredcer from './login';

const persistConfig = {
key : 'root',

storage,
// localStorage에 저장 

whitelist : ['loginreducer']
// loginreducer만 localStorage에 저장 
}

const rootReducer = combineReducers({
modalreducer,
loginredcer
})

export default persistReducer(persistConfig,rootReducer);

1. persist store 사용

// page/index.tsx

import React from 'react';
import {createStore,applyMiddleWare,compose} from 'redux';
import {Provider} from 'react-redux';
import {persistStore} from 'redux-persist';
import {PersistGate} from 'redux-persist/integration/react';
import App from './App';
import configureStore from './store';

const store = createStore(rootReducer);
const persistor = persistStore(store);

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