[React] 장바구니 내역을 persist로 state 유지시키기

Mudi·2022년 12월 29일
0
post-thumbnail

지금까지 구현한 장바구니는 새로고침시에 state가 모두 초기화됩니다.
Redux Persist를 사용하면 로컬스토리지나 세션에 저장하여 새로고침하여도 State를 유지시킬 수 있습니다.

Redux Persist 공식 문서




✔️ 설치




✔️ Persist 적용 전 파일

Persist 설정 전 파일은 이렇게 됩니다.

store.js

index.js

cartSlice.js




✔️ Persist 설정

store.js

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 : 유지하지 않을 슬라이스를 넣습니다.

index.js

import

  • PersistStore : 데이터가 유지되는 Store를 생성합니다.
  • PersistGate : React 사용할 경우 루트 구성 요소를 PersistGate로 래핑해야합니다.

PersistGate 설정

  • PersistGate로 감싸주면 Persist state가 redux에 저장될 때까지 앱의 UI 렌더링을 지연시킵니다.



✔️ lacal storage 확인해보기 👀

  • persistConfig에서 whitelist에 넣은 slice들이 로컬 스토리지에에 저장된 것을 확인할 수 있습니다.
  • 새로고침시에도 state가 유지되고 장바구니에 아무것도 담겨있지 않으면 로컬 스토리지의 cart 배열도 전부 사라지게 됩니다.



참고
npm Persist
참고 블로그

0개의 댓글