Redux에서 컴포넌트로 Thunk 보내기

이 수업에서는 React 컴포넌트 ProductsList에서 제품을 가져오기 위해 thunk를 보낼 것입니다.

이제 제품 애플리케이션을 열고, 그 안의 ProductsList.jsx 파일을 엽니다. 먼저 우리가 생성한 thunk fetchProducts를 import에 추가해 보겠습니다:

import { selectAllProducts, fetchProducts } from './productsSlice'

또한 액션 생성자를 보내기 위해 훅 useDispatch가 필요할 것입니다. 그리고 네트워크 요청은 외부 API이므로 사이드 이펙트를 다루기 때문에 훅 useEffect도 필요합니다:

import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

이제 ProductsList 함수의 코드 첫 줄에서 products 선언 전에 다음을 추가합니다:

const dispatch = useDispatch()

다음으로 상태에서 제품을 가져올 때 요청 상태도 추출할 것입니다:

const products = useSelector(selectAllProducts)
const productStatus = useSelector((state) => state.products.status)

그리고 바로 이어서 훅 useEffect를 사용하여 React에게 컴포넌트 렌더링 후 제품을 가져와야 한다고 알립니다. 여기서 요청 상태가 필요합니다. 왜냐하면 요청이 한 번만 전송되도록 하는 것이 중요하기 때문입니다:

useEffect(() => {
	if (productStatus === 'idle') {
		dispatch(fetchProducts())
	}
}, [productStatus, dispatch])

이제 애플리케이션을 실행하고, 왼쪽 메뉴에서 'Products'를 클릭할 수 있습니다. 아직 제품 목록은 보이지 않지만, Redux DevTools로 들어가면 창의 왼쪽 부분에 자동으로 생성된 (지난 수업에서 말씀드렸듯이) 액션 products/fetchProducts/pending와 fulfilled가 나타날 것입니다. 이제 액션 products/fetchProducts/fulfilled와 그 필드 payload를 클릭해 보세요 - 우리의 제품 목록이 있습니다! 만세, 우리의 모든 연결 고리 - 서버, 데이터베이스, 클라이언트 및 Redux 애플리케이션이 조화롭게 함께 작동하고 있습니다. 참고로 여기에 요청 상태가 보이는 meta 속성도 있습니다.

또 한 가지 주의할 점은, 여러분의 경우 pending 및 결과적으로 fulfilled가 두 번씩 표시될 수도 있습니다. 그렇더라도 실망하지 마세요, 이에 대해서는 나중에 이야기하겠습니다.

학생 애플리케이션을 엽니다. 그 안의 StudentsList.jsx 파일을 엽니다. 수업 자료에 따라 필요한 훅과 thunk를 import하세요.

수업 자료를 학습한 후, 요청 상태 studentStatus를 가져온 다음, useEffect를 사용하여 studentStatus 값이 'idle'일 때만 fetchStudents를 보내세요.

애플리케이션을 실행하고, 왼쪽 애플리케이션 메뉴에서 'Students'를 클릭한 다음, 브라우저에서 Redux DevTools 확장 프로그램을 실행하세요. 이 수업에서와 같이 pending와 fulfilled 액션을 봐야 합니다 (그 안에 학생들이 있는 payload 포함). 확장 프로그램의 탭들을 살펴보세요.