Redux에서 컴포�넌트에 thunk 작업 결과 출력하기

지난 수업에서 우리는 thunk addProduct를 사용하여 POST 요청을 보냈습니다. 이제 그 작업 결과를 컴포넌트에 표시해 보겠습니다.

우리의 제품 애플리케이션을 열고, 새 제품 추가를 담당하는 컴포넌트인 파일 NewProductForm.jsx를 엽니다. import 구문을 봅시다. 액션 productAdded의 import를 thunk addProduct의 import로 바꿉니다:

import { addProduct } from './productsSlice'

슬라이스에서 'pending' 요청 상태를 추적하지 않기 때문에, 사용자가 제품 저장 버튼을 한 번만 클릭할 수 있도록 합시다. 동일한 반복 요청이 필요하지 않기 때문입니다. 이를 위해 또 다른 로컬 상태를 추가합니다:

const [requestStatus, setRequestStatus] = useState('idle')

다음으로, 핸들러 이후 그리고 onSaveProductClick 함수 이전에 코드를 작성하여 폼의 모든 필드가 채워져 있고 요청 상태가 'idle'인지 확인합니다:

const canBeSaved =
	[name, desc, price, amount, sellerId].every(Boolean) &&
	requestStatus === 'idle'

그런 다음 onSaveProductClick의 코드를 변경합니다. 첫째, 이것은 비동기 함수이며 위의 조건이 참일 때 실행됩니다:

const onSaveProductClick = async () => {
	if (canBeSaved) {}
}

슬라이스에서 'rejected' 상태를 추적하지 않더라도, 콘솔에 오류를 출력할 수 있습니다. 이를 위해 구조 try-catch를 사용합니다. 또한 요청 실행 후 로컬 상태를 다시 'idle'로 설정하기 위해 finally도 추가합니다:

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('제품 저장 오류: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

catch 및 finally 블록을 다루었으니, 이제 try 블록에 대한 코드를 작성해 봅시다. 여기서는 thunk 작업 결과로 어떤 응답이 반환될 때까지 로컬 상태를 'in progress'로 설정한 다음 thunk addProduct를 디스패치합니다. 응답 유형에 따라 try-catch 구조를 사용하는 데 RTK가 반환된 프로미스에 추가하는 함수 unwrap가 도움이 될 것입니다. 그런 다음 요청이 성공하면 로컬 상태를 초기 상태로 설정합니다. onSaveProductClick의 전체 코드는 다음과 같습니다:

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
			setRequestStatus('in progress')
			await dispatch(
				addProduct({ name, desc, price, amount, seller: sellerId })).unwrap()
			setName('')
			setDesc('')
			setPrice(0)
			setAmount(0)
			setSellerId('')
		} catch (err) {
			console.error('제품 저장 오류: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

애플리케이션을 실행하고 새 제품을 추가해 보십시오. 보시다시피, 요청이 성공하면 필드가 지워지고 새 제품이 제품 목록에 추가됩니다. 또한 브라우저에서 Redux DevTools를 열고 탭을 탐색하며 액션과 상태 변경 사항을 확인해 보십시오.

학생 애플리케이션을 엽니다. 그 안에서 파일 NewStudentForm.jsx를 엽니다. 로컬 상태 requestStatus를 추가하고 초기 값을 'idle'로 설정합니다. 강의 자료를 참고하여 변수 canBeSaved를 정의합니다. 이 변수를 사용하여 새 학생 데이터 저장 버튼은 requestStatus 값과 필드 채우기 상태에 따라 작동/비작동하게 됩니다.

onSaveStudentClick에 대한 비동기 코드를 작성합니다. 이 코드는 상황에 따라 requestStatus 값을 변경하고, 새 학생 데이터와 함께 thunk addProduct를 디스패치하며, 요청 성공 시 필드를 지우고 실패 시 콘솔에 오류를 출력합니다. 강의에서 보여준 것처럼 이를 위해 구조 try-catch와 RTK 함수 unwrap를 사용합니다.

애플리케이션을 실행하고 새 학생을 추가한 후 모든 것이 작동하는지 확인합니다.