Redux 애플리케이션에서 action 전송하기

이제 반응 슬라이스를 업데이트하는 리듀서가 준비되었습니다. 이제 사용자가 반응 버튼을 클릭할 때 트리거될 action 전송을 추가해야 합니다. 하지만 모든 기능이 완전히 작동하기 전에 몇 가지 수정 사항을 적용해야 합니다.

상품 애플리케이션을 열고, 그 안에 있는 productsSlice.js 파일을 여십시오. initialState 정의를 살펴보세요. 보이시나요? 객체들에 반응 속성이 없습니다. 각 반응의 카운터를 0으로 설정하여 이를 수정해 봅시다:

products/productsSlice.js{
  id: '1',
  title: 'Product1',
  desc: 'This is an amazing product',
  price: '300',
  amount: '30',
  reactions: {
    good: 0,
    soso: 0,
    bad: 0,
  },
},

초기화를 위한 두 번째 객체에는 직접 reactions 속성을 추가하십시오. 또한 새로운 상품에도 이 기능이 포함되도록 하기 위해 아래에 있는 productAdded 리듀서 코드에도 이 속성을 추가해야 합니다. 해당 리듀서의 prepare 메서드에 추가해 봅시다:

products/productsSlice.jsprepare(title, desc, price, amount, sellerId) {
  return {
    payload: {
      id: nanoid(),
      title,
      desc,
      price,
      amount,
      seller: sellerId,
      reactions: {
        good: 0,
        soso: 0,
        bad: 0,
      },
    },
  }
},

이제 action 전송을 시작해 보겠습니다. UserReactions.jsx 파일을 연 다음, 여기에 useDispatch 훅과 reactionClicked를 임포트합니다:

products/UserReactions.jsximport { useDispatch } from 'react-redux'
import { reactionClicked } from './productsSlice'

함수 UserReactions 본문 코드 시작 부분에서 (const userReactions ... 전에) 첫 번째 줄에 다음을 작성합니다:

products/UserReactions.jsxconst dispatch = useDispatch()

그리고 반응 버튼에 클릭 시 reactionClicked를 전송하는 이벤트 핸들러를 연결합니다. 이때 상품 ID와 클릭된 반응의 이름이 전달됩니다:

products/UserReactions.jsx<button
  key={name}
  type="button"
  className="reaction-button"
  onClick={() =>
    dispatch(reactionClicked({ productId: product.id, reaction: name }))
  }
>
  {image} {product.reactions[name]}
</button>

이제 우리가 할 일은 각 페이지의 마크업에 반응 컴포넌트를 출력하는 것입니다. ProductsList.jsx 파일에서 Link 요소 앞에 다음을 추가합니다:

products/ProductsList.jsx<UserReactions product={product} />

그리고 상품 페이지의 ProductPage.jsx 파일에서도 Link 요소 앞에 동일하게 추가합니다:

products/ProductPage.jsx<UserReactions product={product} />

이제 모든 것이 제자리에 배치되었으므로 애플리케이션을 실행할 수 있습니다. 반응 버튼을 클릭해 봅시다. 새 상품을 추가하고 거기에도 클릭해 볼 수 있습니다. 이제 반응 버튼을 어디에서 클릭하든, 변경된 값은 해당 상품에 대해 모든 페이지에 표시됩니다. 개별 상품 페이지(반응을 클릭한 페이지)와 상품 목록 페이지를 확인해 보세요. 그 반대의 경우도 마찬가지로, 모든 페이지에서 특정 상품에 대한 반응 수는 동일할 것입니다.

이 강의는 Redux에서 데이터 작업에 관한 장의 마지막이었습니다. 우리는 Redux store의 데이터를 더 깊이 있게 다루었고, 이제 애플리케이션에 필요한 기능을 추가하고 React 컴포넌트에서 데이터를 사용하는 방법을 알게 되었습니다.