makeFetchSaga 문의드립니다.

Question

강사님 안녕하세요. 제가 강사님 강의를 동료들에게 추천해서 현재 3명이 이 강의를 더 듣고 있답니다. 그런데 저 혼자 열심히 듣고 있는 거 같아서 협업이 잘 안되고 있네요 ㅠ 오늘은 강의해서 설명해 주신 makeFetchSaga 를 보면서 응용을 해보고 있습니다. makeFetchSaga 에서는 하나의 Action 에 하나의 callApi 만 포함되어 있다고 가정하고 작성된 관리법 같습니다. 즉, Action 기준으로 API 상태관리가 이뤄지고 있는 듯 한데요. 그런데 하나의 Action 을 통해 동시에 2-3건의 callApi 를 호출해야 하는 경우도 있을테고  (all 안에 2건의 call 을 넣어서...) 아니면 callApi 를  순서대로 2-3번 호출해야 하는 경우도 있을 거 같아요.. 이럴 경우에는 Action 단위로 상태관리가 어려워질 것 같은데 현업에서는 어떻게 활용하고 계신지요?

이재승 · Answer

그렇군요ㅎㅎ 첫 번째 예제처럼 all 을 사용하는 경우는 고려가 되어있지 않습니다 아직 그런 니즈가 없었어서요 다만 두 번째 예제처럼 동기로 기다리면서 여러 번 호출하는건 지금도 가능할거에요

아리마 · Answer

강사님 제가 설명을 잘못 작성해 드린 것인지 제 의도와 조금 다른 답변을 해주신 거 같아요. "상품 조회" 라는 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 는 상태관리가 제대로 되지 않을 듯 한데요.. 이런 부분에 대해서 어떻게 관리하고 계신지가 궁금합니다.

이재승 · Answer

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