지금까지 구현한 장바구니는 새로고침시에 state가 모두 초기화됩니다.
Redux Persist를 사용하면 로컬스토리지나 세션에 저장하여 새로고침하여도 State를 유지시킬 수 있습니다.
Persist 설정 전 파일은 이렇게 됩니다.
import
storage
: localstorage에 저장하여 state를 유지시킬 것이므로 storage를 import해줍니다.conbineReducers
: 여러 슬라이스 리듀서를 하나의 객체로 모아주는 redux의 헬퍼 함수입니다.persistReducer
: persistConfig와 reducer를 적용시키고 묶어 새로운 reducer를 반환합니다.
session
에 저장하고 싶다면
import sessionStorage from 'redux-persist/es/storage/session';
persistConfig
key
필수 : 저장되는 값의 식별자로 사용됩니다.storage
필수 : 저장할 storage 지정 (storage 또는 storageSession)whitelist
: 유지하고 싶은 슬라이스를 넣습니다.blacklist
: 유지하지 않을 슬라이스를 넣습니다.
import
PersistStore
: 데이터가 유지되는 Store를 생성합니다.PersistGate
: React 사용할 경우 루트 구성 요소를PersistGate
로 래핑해야합니다.
PersistGate 설정
PersistGate
로 감싸주면 Persist state가 redux에 저장될 때까지 앱의 UI 렌더링을 지연시킵니다.
persistConfig
에서whitelist
에 넣은slice
들이 로컬 스토리지에에 저장된 것을 확인할 수 있습니다.- 새로고침시에도 state가 유지되고 장바구니에 아무것도 담겨있지 않으면 로컬 스토리지의 cart 배열도 전부 사라지게 됩니다.