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

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

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

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

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

prepare(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를 임포트합니다:

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

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

const dispatch = useDispatch()

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

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

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

<UserReactions product={product} />

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

<UserReactions product={product} />

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

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

학생 애플리케이션을 열어주세요. studensSlice.js 파일에서 초기화 객체에 해당 필드를 가진 votes 속성을 추가하세요. studentAdded 리듀서에도 동일하게 적용하세요.

UserVotes.jsx 파일 내의 UserVotes 함수에서, useDispatch 훅을 위한 dispatch를 설정하고, 투표 버튼 클릭 시 voteClicked 액션을 전송하도록 하세요. 강의에서 보여준 것과 유사하게 학생 ID와 vote 이름을 전달합니다.

StudentsList 및 StudentPage 컴포넌트의 마크업에 투표 버튼을 출력하세요.