210319_ TIL / saga 이펙트 함수

피로누적과....회사 업무로 인하여
이론 공부로 마무리 ~

1. 리덕스 사가

리덕스 사가 사용하는 이유

redux의 함수는 무조건 동기적으로 데이터가 흘러간다.

웹은 언제나 비동기로 사용자 경험을 높이는 것이 중요합니다.

redux을 사용하면서 redux-saga도 동시에 사용함으로 비동기의 유연함도 같이 가져갈 수 있습니다.

diapatch를 여러번 할 경우 컴포넌트 파일에서 dispatch로직을 2번 써야하니 불편하기도 합니다.

리덕스 필수 지식

제네레이터

• 함수에 ``를 붙이고, yield라는 문법을 사용합니다.

const gen = function* () {
  console.log(1);
  yield;
  console.log(2);
  yield;
  console.log(3);
  yield;
  console.log(4)
}
const gener = gen();
// gener() - gener{<suspended>}
gener().next() -> 1
gener().next() -> 2
gener().next() -> 3
gener().next() -> 4
gener().next() -> undifined

saga 이펙트 함수

• all은 배열을 받고, 받은 이펙트를 등록 (실행 아님, 등록임!!)
• fork는 함수를 실행
• call은 동기함수호출 (api가 리턴할때까지 기다림), fork은 비동기함수 호출 (안기다리고 리턴 다음꺼 이동)
  • 중요! 통신할때는 무조건 call (yield가 await과 비슷)
• take -> 한번만 실행되고 이벤트 삭제됨
• takeEvery -> 한번 실행되도, 이벤트 계속 리슨
• takeLatest -> 클릭 실수로 2번 했을때, 앞 이벤트 무시 마지막 이벤트 실행(보통 이거 많이씀)
  • 이미 완료됬다면 실행해줌 -> 둘다 팬딩이면 뒤에꺼만
  • 주의! front -> back으로 2번 req를 보내긴함 -> 그러나 b->f로 res는 1번 보냄 (즉, 서버단에 저장 2번됬는지 확인 필요)
  • 즉 : 새로고침하면 2개가 반영될수있음
  • 위에꺼를 막기위해 throttle가 있음
• throttle: 초 이내에 req를 1번만 - 이거 많이써야겠네 - 스크롤 (마지막 함수가 호출된 후 일정 시간이 지나기전 재호출 안함)
• debounce: 검색 결과 - 초 이내에 req를 1번만 (연이어 호출되는 함수들 중 마지막 함수 or 가장 처음 함수만 호출)
• takeLeading: 첫번째 이벤트만 실행, 뒤에꺼 무시

내일 할일

• 리덕스 적용
• 리듀서 만들기