next+ts 16일차 login saga비동기 처리

오늘은 Saga비동기 처리중에 간단한 오류를 엄청 고민하고 겨우 해결했습니다.

LoginSaga

import axios from "axios";

import { call, put, takeEvery, takeLatest } from "redux-saga/effects";

import { LOGIN_PENDING, LOGIN_SUCCESS } from "../actions/actionTypes";

import { LoginData, LoginJson } from "../types/state";

const checkdata = async () => {

  const res = await axios.get(

    "https://raw.githubusercontent.com/qjawns0222/caremaker/next%2Bts-15%EC%9D%BC%EC%B0%A8-Saga-login/login.json"

  );

  console.log(res);

  return res.data;

};

function* checklogin({ type, payload }: { type: String; payload: LoginData }) {

  try {

    const data: LoginJson = yield call(checkdata);

    data.login.find((res: LoginData) => {

      if (res.id == payload.id && res.password == payload.password) {

        payload.id = res.id;

        payload.password = "true";

        console.log(res.id == payload.id);

        return res;

      }

    });

    console.log(payload.password);

    yield put({ type: LOGIN_SUCCESS, payload });

  } catch (e) {

    console.log(e);

  }

}

export default function* watchLogin() {

  yield takeLatest(LOGIN_PENDING, checklogin);

}

data.ts

이렇게 데이터를 받아와서 아이디와 비밀번호가 같으면  payload.password 를 true로 바꺼서  Success로 넘겨서 해결했습니다.

그리고 checklogin 함수에서 payload만 필요하다고 payload만 가져와서 타입 정해주고 하면 오류가 나더라고요 type도 꼭 설정해주세요

그리고  하던도중에 자꾸 pending이 무한 반복되길래 2시간 정도  찾아봤는데

actiontypees.ts에서

export const LOGIN_SUCCESS = "caremaker/LOGIN_PENDING"; 

이렇게 작성해놔서 무한 루프더라고요... 생각도못하고 계속 찾았습니다. 그래서 다시 고쳐줬습니다.

그리고find함수는 return 기준으로 실행이되요 if문 끝나고 return하면 if문은 실행이 안됩니다.