[React] Redux-Saga

사가는 제너레이터 함수를 기반으로 사용하는 미들웨어로써 take, put, fork, call 등이 존재한다.

기본셋팅

export default function initialSaga(){
  제너레이터 함수()
  제너레이터 함수()
  제너레이터 함수()
}

take

원하는 액션타입이 들어 올 경우 자동으로 next 해주는 문법

📋 예시

function* helloSaga(){
 console.log("before saga");
 yield take(HELLO_SAGA);
 console.log("after saga")
}

이렇게 제너레이터 함수가 있다는 가정 helloSaga()를 실행 시킬 시 
→ result : before saga가 console로 찍힘

만약 after saga를 찍히게 할려면 dispatch ({type : "HELLO_SAGA"})를 해야 자동 next 처리됨

이때 dispatch를 한번 이상 해야 할 땐 반복문을 넣어줘야함 

TakeEvery & TakeLatest (Saga의 반복문)

---

📖 TakeEvery

dispatch({
 type : "HELLO_SAGA"
})

function* watchHello() {
 yield takeEvery(HELLO_SAGA, function*(){
  yield put({
   type : "BYE_SAGA"
  })
 }
}
// takeEvery는 dispatch로 인해 필요한 type이 dispatch 됐을 때 dispatch를 한 횟수만큼
// takeEvery 함수 안의 행동을 반복 해줌

📖 TakeLatest

dispatch({
 type : "HELLO_SAGA"
})

function* watchHello() {
 yield takeEvery(HELLO_SAGA, function*(){
  yield put({
   type : "BYE_SAGA"
  })
 }
}
// takeLatest는 비동기가 들어 갔을 때 비동기 함수 다음으로 하는 행동 중 마지막 행동만 실행시켜줌 

---

put

saga의 dispatch이다 

📋 예시

function* watchLogin(){
 console.log("시-이작")
 yield take(LOG_IN);
 yield put ({
  type:LOG_IN_SUCCESS
  })
}

fork

saga의 비동기 호출 (비동기 병렬 작업 할 때)

call

saga의 동기 호출 (순서를 꼭 지켜서 실행 해야되는 경우)

📋 예시

function* LoginLogic(){
let data;
 yield data = call(loginApiFunc())
 yild put({
  type : LOG_IN_SUCCESS,
  data
 })
} catch (e) {
 console.error(e);
 yield put ({
  type : LOG_IN_FAILURE
 })
}