Redux에서 액션 전송 및 useDispatch 훅

Redux 애플리케이션 작동을 위한 거의 모든 구성 요소를 구현했습니다. 남은 것은 React 컴포넌트에서 액션을 전송하는 방법을 이해하는 것입니다. 시작해 보겠습니다.

우리의 제품 애플리케이션을 여세요. NewProductForm 컴포넌트의 폼에는 새로운 제품 데이터를 저장하기 위한 버튼이 있습니다. 여기에 클릭 핸들러를 추가해 보겠습니다. 클릭 시 onSaveProductClick 핸들러가 실행되도록 합시다:

<button type="button" onClick={onSaveProductClick}>
	save
</button>

새 제품을 생성할 때는 새로운 id가 필요합니다. 우리는 잘 알려진 라이브러리인 nanoid를 사용하여 생성할 것입니다. 참고로, 이 라이브러리는 RTK 패키지와 함께 제공되므로 설치할 필요가 없습니다. nanoid를 import에 추가합시다:

import { nanoid } from '@reduxjs/toolkit'

또한, state를 변경하는 유일한 방법은 store에 있는 dispatch 메서드를 호출하고 액션 객체를 전달하는 것임을 기억합니다. 이 메서드에 접근하기 위해 React-Redux 훅 useDispatch를 사용할 것입니다. 이것도 import 해 봅시다:

import { useDispatch } from 'react-redux'

NewProductForm 함수 코드에서, 우리의 로컬 state에 대한 상수를 선언한 직후에 dispatch 상수를 선언해 봅시다:

const dispatch = useDispatch()

또한 이전 강의에서 얻은 액션 생성자 productAdded를 import해야 합니다:

import { productAdded } from './productsSlice'

이제 onSaveProductClick 핸들러 함수 자체를 작성할 수 있습니다. return 명령문 앞에서 이 작업을 수행합시다:

const onSaveProductClick = () => {}

함수 내에서 dispatch를 호출하고, 액션 객체를 생성하며, 그 payload 속성에는 생성된 id, 이름, 설명, 가격 및 제품 수량이 들어갑니다. 이 모든 데이터는 로컬 state에서 가져옵니다. 이때 처음에 조건문으로 모든 필드가 채워져 있는지 확인하고 - 이 경우에만 dispatch를 호출합니다. 함수 코드 마지막에서는 로컬 state를 초기 상태로 되돌립니다:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productAdded({
				id: nanoid(),
				name,
				desc,
				price,
				amount
			})
		)

		setName('')
		setDesc('')
		setPrice(0)
		setAmount(0)
	}
}

이제 애플리케이션을 실행하고, 폼 필드에 데이터를 입력하고, 저장 버튼을 눌러 보세요. 와, 페이지 하단에 새로운 제품이 나타났습니다. Redux DevTools를 열고 그 안의 Inspector 탭을 보면, 왼쪽에 @@INIT 외에도 우리의 액션 products/productAdded가 추가된 것을 볼 수 있습니다. 오른쪽에서는 Action 및 State 탭을 클릭하면서 @@INIT과 products/productAdded 사이를 전환할 수 있습니다. 이제 우리의 새 제품이 추가되는 것을 볼 수 있습니다. 또한 Action 탭에서 createSlice를 통해 자동 생성된 액션도 볼 수 있습니다(예를 들어 Raw를 클릭해 보세요). 와: 우리가 직접 손으로 작성할 필요가 없었습니다.

학생 애플리케이션을 열고, NewStudentForm.jsx 파일을 연 다음, 저장 버튼에 클릭 핸들러를 추가하세요.

필요한 모든 import를 작성하고, 강의에서 보여준 대로 dispatch 메서드를 적용하여 onSaveStudentClick 핸들러 함수를 작성하세요.

애플리케이션을 실행하고, 폼 필드에 데이터를 입력하고, 저장 버튼을 클릭하세요. 페이지 하단에 새로운 학생이 추가되었는지 확인하세요.

Redux DevTools를 열고 Action 및 State 탭을 살펴보면서 새로운 학생 객체가 추가되는지 확인하세요. 생성된 액션 객체를 보고, 이 작업에 대한 답변으로 보내세요.