Persist 도입

Redux-Persist 도입 이유 :

설문 항목을 dispatch를 통해 store로 관리할때
특정 중간 페이지에서 브라우저 새로 고침 혹은 앱 종료 시에 state 데이터 손실 됨
-> Persist를 통해 session에 기 선택 값을 저장 후 불러오기 가능 > 화면에 표출하여 직관성 업

Redux-Persist 사용방법

**npm install redux-persist

PersistConfig 설정:

import { persistStore } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 브라우저 스토리지 사용

const persistConfig = {
  key: 'root', // 스토리지 키 이름
  storage, // 저장 장소
  whitelist:['checkPlanSlice']
};

const persistedReducer = persistReducer(persistXonfig, combinedReducers);
//모든 reducer에 한번에 적용 가능

const store = configureStore({
	reducer: persistReducer, ....
})

export const persistor = perSistStore(store)

whiteList를 사용하여 특정 reducer 상태만 세션에 저장

index.js
Redux Persist를 사용하여 React 앱에서 저장된 상태를 관리하려면 index.js 파일에 Provider와 PersistGate 컴포넌트를 함께 사용해야 합니다.

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

Provider
Redux Store를 React 앱에 제공합니다.
앱의 모든 컴포넌트가 Store에 접근하고 상태를 사용할 수 있도록 합니다.
Redux Persist를 사용하지 않더라도 필수 컴포넌트입니다.

PersistGate:
Redux Persist가 완료될 때까지 앱 렌더링을 차단합니다.
Store의 상태가 영구 저장소에서 복구되고 필요한 모든 변환이 적용될 때까지 기다립니다.
사용자에게 불완전하거나 일관되지 않은 UI가 표시되는 것을 방지합니다.
Redux Persist를 사용할 때만 필요한 컴포넌트입니다.