makeFetchSaga 문의드립니다.

실전 리액트 프로그래밍

작성

218

강사님 안녕하세요.
제가 강사님 강의를 동료들에게 추천해서 현재 3명이 이 강의를 더 듣고 있답니다.
그런데 저 혼자 열심히 듣고 있는 거 같아서 협업이 잘 안되고 있네요 ㅠ

오늘은 강의해서 설명해 주신 makeFetchSaga 를 보면서 응용을 해보고 있습니다.
makeFetchSaga 에서는 하나의 Action 에 하나의 callApi 만 포함되어 있다고 가정하고 작성된 관리법 같습니다.

즉, Action 기준으로 API 상태관리가 이뤄지고 있는 듯 한데요.
그런데 하나의 Action 을 통해 동시에 2-3건의 callApi 를 호출해야 하는 경우도 있을테고 (all 안에 2건의 call 을 넣어서...)
아니면 callApi 를 순서대로 2-3번 호출해야 하는 경우도 있을 거 같아요..
이럴 경우에는 Action 단위로 상태관리가 어려워질 것 같은데 현업에서는 어떻게 활용하고 계신지요?

redux react

답변 3

이재승

지식공유자

그렇군요ㅎㅎ
첫 번째 예제처럼 all 을 사용하는 경우는 고려가 되어있지 않습니다
아직 그런 니즈가 없었어서요

다만 두 번째 예제처럼 동기로 기다리면서 여러 번 호출하는건 지금도 가능할거에요

아리마

질문자

강사님 제가 설명을 잘못 작성해 드린 것인지 제 의도와 조금 다른 답변을 해주신 거 같아요.

"상품 조회" 라는 Action 을 Dispatch 하면 fetchGetItem 이라는 Saga 함수가 호출된다고 가정하겠습니다.
fetchGetItem 안에서는 서로 다른 2개의 API 를 call 해야 합니다.
(2개의 API 를 결과를 조합해서 하나의 결과를 화면으로 전달해야 한다고 보시면 됩니다.)

function* fetchGetItem() {

	const { itemApi, itemSaleApi } = yield all({
		itemApi: call(callApi, {
			url: '/item/...',
			method: 'post',
		}),
		itemSaleApi : call(callApi, {
			url: '/itemSale/....',
			method: 'post',
		}),
	});

... 이하 생략

그리고 아래와 같은 Case 도 있을 거 같아요. fetchGetItem 안에서 동기식으로 2번의 서로 다른 API 를 호출하는 경우

function* fetchgetItem() {
	const { isSuccess, data } = yield call(callApi, {
		url: '/item/....',
		method: 'post',
	});

	if (data.saleId){
		const { isSuccess, data } = yield call(callApi, {
			url: '/itemSale/....',
			method: 'post',
			data: {
				saleId: data.saleId
			},
		});	
	}
.. 이하 생략

즉, Saga 함수 안에서 서로다른 API 를 다양하게 호출하는 경우, 지금의 makeFetchSaga 는 상태관리가
제대로 되지 않을 듯 한데요.. 이런 부분에 대해서 어떻게 관리하고 계신지가 궁금합니다.

이재승

지식공유자

아리마님 안녕하세요
강의 추천 정말 감사합니다^^

하나의 액션으로 여러 요청을 관리할 수 있습니다
whois 프로젝트에서 fetchUpdateUser 액션을 참고하시면 될 것 같아요
fetchKey 속성으로 (하나의 액션에서) 여러 요청을 관리합니다
참고로 여러 요청을 동시에 처리하려면 takeLeading 대신에 takeEvery 를 사용하시면 됩니다

인프런 커뮤니티 질문&답변

makeFetchSaga 문의드립니다.