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

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

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

products/ProductsList.jsximport { selectAllProducts, fetchProducts } from './productsSlice'

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

products/ProductsList.jsximport { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

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

products/ProductsList.jsxconst dispatch = useDispatch()

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

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

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

products/ProductsList.jsxuseEffect(() => {
  if (productStatus === 'idle') {
    dispatch(fetchProducts())
  }
}, [productStatus, dispatch])

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

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