사가 관련해서 질문있습니다.

[리뉴얼] React로 NodeBird SNS 만들기

작성

182

안녕하세요. 강의 수강 중 질문있어서 문의드립니다.

사가 이용하여 api를 호출하는데, 해당 api는 다른 state의 업데이트로 인하여 재 호출 되는 구조입니다.

따라서 페이지 진입 시 동시에 3번이 호출 되는데요,

function* loadMaxEpisode() {
    try { // yield는 await와 비슷
        const result = yield call(loadMaxEpisodeAPI); // call 은 동기식, fork.는 비동기
        console.log(result)
        alert(result.data.maxEpisode);
        yield put({ // put은 dispatch -> 즉, 액션을 dispatch한다.
            type: LOAD_MAXEPISODE_SUCCESS,
            data: result.data, // result로 하면 response값이 다 들어온다.
        });
    } catch (err) {
        yield put({
            type: LOAD_MAXEPISODE_FAILURE,
            data: err.response,
        })
    }
}

위 코드에서 result.data의 값이 500이 들어오면

result.action을 찍으면 500500이라는 값으로 보여집니다.

(3번 호출 중 2개의 리스폰스 값이 위와 같이 합쳐서 보여지고, 나머지 하나는 정상인 500으로 반환됩니다.)

어느부분이 잘못 된 것인지 감이 안오네요...ㅠ

관련해서 어느 부분을 확인해 봐야할까요??

saga redux express nodejs react Next.js

답변 2

hyunlove12

질문자

안녕하세요. 강사님.

case LOAD_MAXEPISODE_REQUEST:
    draft.loadMaxEpisodeLoading = true;
    draft.loadMaxEpisodeDone = false;
    draft.loadMaxEpisodeError = null;
    break;
case LOAD_MAXEPISODE_SUCCESS:
    draft.loadMaxEpisodeLoading = false;
    draft.loadMaxEpisodeDone = true;
 //   alert(action.data);
    draft.maxEpisode = parseInt(action.data);
    break;
case LOAD_MAXEPISODE_FAILURE:
    draft.loadMaxEpisodeLoading = false;
    draft.loadMaxEpisodeError = action.error;
    break;

function* watchLoadMaxEpisode() {
    yield takeEvery(LOAD_MAXEPISODE_REQUEST, loadMaxEpisode);
}

리듀서 및 사가 부분입니다.

크롬 시크릿 모드에서 실행하니 정상으로 동작합니다.

정확한 원인은 모르겠으나, 캐시 문제 떄문에 그런것이 아닌가 싶은데....

제가 조금 더 확인해보고 안 되면 다시 질문드리겠습니다.

감사합니다!

제로초(조현영)

지식공유자

result.data, result.action 은 직접 만드신 것이라 제가 파악이 안 됩니다. 리듀서 부분도 보여주셔야 할 것 같습니다.

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

사가 관련해서 질문있습니다.