질문이 있습니다!

안녕하세요 제로초님 노드버드 강의 이후 참고해서

타입스크립트 적용해서 프로젝트를 하는 중인데 도저히 뭐가 문제인지

알 수가 없어 질문드립니다....

먼저 로그인 폼에서

const onLogin = useCallback(() => {
        console.log("로그인폼");
        if (emailError || passwordError) {
            return;
        }
        return dispatch(loginRequest({ email, password }));
    }, [email, password, emailError, passwordError]);

로그인 액션을 디스패치합니다.

import { UserType } from "../reducer/rootReducer";
import { LOGIN_REQUEST, LOGIN_SUCCESS, LOGIN_FAILURE } from "./types";

export const loginRequest = (data: UserType) => {
    console.log("로그인 액션 데이터는 ", data);
    return {
        type: LOGIN_REQUEST,
        data,
    };
};

export const loginSuccess = (data: UserType) => ({
    type: LOGIN_SUCCESS,
    data,
});

export const loginFailure = (error: string) => ({
    type: LOGIN_FAILURE,
    data: error,
});

export type Actions =
    | ReturnType<typeof loginRequest>
    | ReturnType<typeof loginSuccess>
    | ReturnType<typeof loginFailure>;

export const LOGIN_REQUEST = "LOGIN_REQUEST" as const;
export const LOGIN_SUCCESS = "LOGIN_SUCCESS" as const;
export const LOGIN_FAILURE = "LOGIN_FAILUREE" as const;

로그인 액션에서도 콘솔을 찍고

case LOGIN_REQUEST:
            console.log("리듀서 액션은 ", action);
            return {
                ...state,
                loginRoading: true,
                loginDone: false,
                loginError: null,
          };

그리고 리듀서에서도 콘솔 찍고

function* login(action: Actions) {
    console.log("사가 액션은 ", action);
    debugger;
    const result = (yield call(login, action.data)) as Actions;
    console.log("result", result);
}

function* watchLogin() {
    yield takeLatest(LOGIN_REQUEST, login);
}

export default function* rootSaga() {
    yield all([fork(watchLogin)]);
}

사가에서도 콘솔을 찍어봤습니다.

그런데

사가가 3번이나 호출이 됩니다... 다른 부분에서 디스패치를 더 하지도 않았는데

왜 그러는지 모르겠습니다ㅠㅠㅠ 심지어 두번째는 액션 타입은 보내지도 않고 데이터만 보내고

결국 마지막에 undefined가 되어 API 요청 보내기도 전에 에러가 납니다.

검색해도 나오질 않고 계속 콘솔 찍어보며 확인하다 답이 없어 질문드립니다...!

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