redux-saga의 call에 관해

리덕스 사가에는 주식시장을 떠오르게 하는 콜(call)과 풋(put)이 있습니다. (물론 주식과의 연관성은 제로입니다! 😄)

이 중 사가 안에서 콜백을 호출하는 콜에 관한 궁금증이 생겼는데, 바로 코드를 통해 공유드리도록 하겠습니다.

// api/getMemberList.js

export const getMemberList = async () => {
  const res = await fetch("http://localhost:5000/member");
  const data = await res.json();
  return data;
};

// sagas/requestSaga.js
// 예외처리 및 yield all 등의 로직은 생략했습니다.

const loadSuccess = (data) => ({
  type: "SUCCESS_FETCH",
  loading: false,
  payload: data,
});


export function* fetchMemberSaga() {
    const result = yield call(getMemberList);
    yield put(loadSuccess(result));
}

export function* requestSaga() {
  yield takeEvery("REQUEST_FETCH", fetchMemberSaga);
}

사가와 비동기 요청을 통해 DB에서 멤버 정보를 불러오는 기능을 구현한 코드입니다.

 

동작을 간단히 요약해보자면 "REQUEST_FETCH" 액션이 디스패치되면 콜에 의해 getMemberList가 호출되고, getMemberList의 리턴값이 result 변수에 담기게 됩니다.

 

하지만 getMemberList 함수는 async 함수로 언제나 프라미스를 반환하게 되어 있는데요, 그럼에도 불구하고 result에는 프라미스의 resolve로 주어진 결과값이 담기게 됩니다.

export function* fetchMemberSaga() {
    const result = yield call(getMemberList);
    console.log(result) // [{memberName: "찬민"...}]
    yield put(loadSuccess(result));
}

어떻게 이게 가능한 걸까요?

 

왜냐 하면 콜은 프라미스가 resolve될 때까지 기다리고, resolve 함수로 넘겨진 값을 yield로 받아오도록 구현되어 있기 때문입니다!

따라서 리덕스 사가를 활용하면 프라미스의 then 내부에서 무언가를 하려 할 필요 없이 페칭 로직에만 집중할 수 있겠습니다. 😄