[TIL/React] 2023/10/14

redux-toolkit shopping cart(with. redux-persist) ✍️

reference: https://github.com/trickjsprogram/toolkit-shopping-cart

최상단인 App.js에서는 NavBar와 CartContainer를 렌더링한다.

NavBar

MDB는 부트스트랩의 일종이다. NavBar는 Redux-Toolkit Shopping Cart라는 '제목'과, totalCount를 보여주는 '아이콘'으로 구성된다. totalCount라는 전역상태를 아이콘 상에서 보여주는 것이 사실상 전부이다.

CartContainer

CartContainer는 크게 두 파트로 구분된다

CartContainer - part 1

useEffect에 'dispatch(getCardTotal())' 코드를 담고 의존성 배열에 items를 추가하여, view를 그릴 때 항상 items라는 배열을 가져오도록 설정했다. 그런데 만약 삭제를 통해 items의 length가 0이 된다면, 쇼핑 카드가 비어있다는 문구를 보여주도록 코드를 작성했다. 하단에 위치한 Get Items 버튼을 클릭하면 모든 items 배열의 data를 받게 된다.

CartContainer - part 2

추가된 배열의 요소가 존재한다면 해당 요소를 CartItem 컴포넌트의 형식으로 보여준다. 개별 카드라고 생각하면 된다. 하단에는, 카트에 담긴 모든 요소의 '총 합 가격'과 clear cart라는 전체 삭제 버튼이 보여지게 된다.

CartItem

CartItem은 기본적으로 상품 정보를 보여준다. 첫 번째 icon을 통해 추가된 개별 요소를 삭제할 수 있도록 했다. 나머지 두 개의 icon은 상품 개수의 증가와 감소의 기능을 수행한다.

cartSlice

위 코드의 6개의 reducer를 이해하는 것이 핵심이 되겠다.

1) remove

배열의 최신화를 수행한다. state.items는 배열인데 filter를 통해 새로운 배열로 교체한다. 새로운 배열이란 action.payload(=id)와 item.id가 다른 경우만 남긴 배열을 의미한다. 같은 경우를 제외하겠다는 뜻이고, 곧 삭제를 의미한다.

2) increase

선택한 item에 대하여, id가 일치한다면 amount에 1을 더한 새로운 객체를 return한다. 그리고 update된 객체를 배열에 반영한다.

3) decrease

increase의 반대이다. 다만 filter를 통해 amount가 0이 되면 배열에서 제외되도록 설정했다. 즉 amount가 0이면 삭제와 동일하게 간주된다.

4) clearCart, getCartItems

5) getCartTotal

items 배열에 대하여 reduce method를 실행하고 있다. cartItem은 배열의 요소 중, currentValue를 의미한다. price와 amount를 추출하여 itemTotal이라는 값을 만들었다. reduce의 초기값은 {totalAmount:0, totalCount:0,} 객체다. cartTotal을 반환하며 값을 계속 더하는 로직이다. 하단의 state로 연결된 코드는 값의 갱신을 수행한다.

중요한 것은, reduce를 통해 배열을 객체로 변환하면서, 내가 설정한 초기값(=객체, {totalAmount:0, totalCount:0,})에 맞는 자료구조의 값(=객체, cartTotal)을 return한다는 점이다.

index.js

위 코드를 통해 새로고침 후에도 store state를 유지할 수 있게 된다. 관련해서 web storage에 대한 개념을 이해해야 하는데, 본 글에서는 다루지 않도록 하겠다.

완성된 모습 ✍️