[Redux] Redux-Saga 원리 , 개념정리

saga의 아이디어는 generater 함수인데 ..

*   별을찍는것이다 이렇게 function*  충격과 공포임

 

function* idMaker(){
	var index = 0; 
	while(true)
    	yield index++;
}

보통 함수라면 while(true)시 무한 반복이 되겠지만 generater 함수에서 yield를쓴다면

함수를 호출할떄마다 한번 하고 멈추고 한번하고 멈추게된다.

var gen = idMaker(); // "Generator { }"

console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

실제 콘솔로그를 찍는다면 0 멈추고 다시 호출하면 1 멈추고 다시호출하면2 .이런식

약간비유를하자면  event  listener같다.

 

즉,

yield 를 넣어주면 멈춤 중단점이 생김

함수를 중간에 멈추고싶다 == generater 함수를 쓰면 가능!

그것을 이용한게 saga (유사 무한이벤트리스너)

 

login에대해 구현해보면..

import { all, fork, take, call, put } from "redux-saga/effects";
import axios from "axios";

// 서버에 값을 요청
function logInAPI(data) {
  return axios.post("/api/login", data);
}

function* logIn(action) {
  try { 
  // 로그인성공 정보를 담음
    const result = yield call(logInAPI, action.data);
    yield put({
      type: "LOG_IN_SUCCESS",
      data: result.data,
    });
  } catch (err) {
    //   로그인실패 정보
    yield put({
      type: "LOG_IN_FAILURE",
      data: err.response.data,
    });
  }
}


function* watchLogin() {
  yield take("LOG_IN_REQUEST", logIn);
}


// 루트 사가를 만들고 비동기 액션들을 넣어준다.
export default function* rootSaga() {
  yield all([fork(watchLogin)]);
}

여기서 주의할건 api호출함수는 generater 함수가 아니다

saga에 단점은 action 함수들이 많아지면 코드가 길어진다는것이다.

 

saga effect

all : 배열을 받고 , 배열안에것들을 한번에 실행해준다(동시에실행)

fork : 비동기 함수 호출, 실행

call : 동기 함수 호출 ,실행

take : 기다리겠다 LOG_IN 이라는 액션이 실행될떄까지 기다림

put : dispatch