210319_ TIL / saga 이펙트 함수
피로누적과....회사 업무로 인하여
이론 공부로 마무리 ~
- 리덕스 사가
리덕스 사가 사용하는 이유
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
: 첫번째 이벤트만 실행, 뒤에꺼 무시
내일 할일
- 리덕스 적용
- 리듀서 만들기
Author And Source
이 문제에 관하여(210319_ TIL / saga 이펙트 함수), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rlatmdgns94/210319-TIL저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)