Redux에서 thunk 직접 디스패치하기

컴포넌트에서 액션을 디스패치할 때는, 컴포넌트에서 store에 직접 접근할 수 없기 때문에 store의 메서드 dispatch를 반환하는 훅 useDispatch를 사용했습니다.

이번에는 판매자 객체들을 가져와야 하고, 애플리케이션이 시작될 때 한 번만 이를 수행해야 합니다. worker가 작업을 시작한 후 앱의 메인 파일 main.jsx에서 바로 이를 수행할 수 있습니다.

제품 애플리케이션을 열고, 그 안의 파일 main.jsx를 열고 thunk fetchSellers를 임포트해 봅시다:

import { fetchSellers } from './parts/sellers/sellersSlice'

이 파일에서는 store를 사용할 수 있으므로, 여기서는 어떤 훅도 필요하지 않으며 store의 메서드 dispatch를 직접 사용할 수 있습니다. 다음 줄 이후에:

await worker.start({ onUnhandledRequest: 'bypass' })

다음 줄을 추가해 봅시다:

store.dispatch(fetchSellers())

애플리케이션을 실행해 봅시다. 이제 제품 카드에 판매자도 표시됩니다:

학생 애플리케이션을 열어주세요. 그 안의 파일 main.jsx를 열어주세요. 여기에 thunk fetchTeachers를 임포트하고 store.dispatch 메서드를 사용하여 직접 디스패치해주세요.