redux-thunk
리덕스의 미들웨어(redux의 기능 향상+ 리덕스에 없던 기능을 추가)
=>비동기 통신을 도와주는 역할
dispatch를 묶어서 할 수 있다
thunk의 필요이유=> 로그인 로그아웃은 백엔드에 요청해서 응답을 받아와야한다. 보통은 3단계(request, success, failure)로 두고 dispatch
기존은 redux는 setTimeout과같은 비동기 함수에 대해서 실행이 안된다.
npm i redux-thunk
import thunkMiddleware from 'redux-thunk';
const middleware = [thunkMiddleware];
saga와 thunk의 차이를 확실하게 알기(로그인 클릭을 2번하거나, 어떤 행동에 딜레이를 주고싶을때, 스크롤 할때 요청관련(denial of service )
DoS(Denial of Service) 공격은 웹 사이트 또는 애플리케이션과 같은 대상 시스템의 가용성과 합법적인 최종 사용자에게 악영향을 미치려는 악의적인 시도입니다. 일반적으로 공격자는 대량의 패킷 또는 요청을 생성하여 궁극적으로 대상 시스템을 마비시킵니다.
프론트 개발자 중 최악의 개발자 => 셀프 ddos하는 사람
throttle, debounce( 1초에 몇 번까지 허용한다와 같은 기능들으 제공) (thunk로는 이부분이 부족하거나 어렵다)
컴포넌트에서 axios를 호출하는 것에 대한 지양 ->결국 thunk나 saga의 모양을 하고 있다.
genarator (function//)
=>함수
const gen = function* (){
console.log(1);
yield;
console.log(2);
yield;
console.log(3);
yield 4;
}
const generator = gen();
console.log(generator)
console.log(geneartor.next())
==> 1이 나온다.
console.log(geneartor.next())
==> 2가 나온다.
console.log(geneartor.next())
3이 나온다.
generator은 중단점이 있는 함수(yield가 있는 곳에서 멈춘다는 것을 알수있다.)
해본다.
let i = 0;
const get = function* () {
while(true){
yield i++ ;
}
}
=>실제로는 무한반복이라 말이 안되는데, saga는 중단점이 생긴다.
console.log(get.next())를 찍어보면 한다.
=>eventlistener 역할을 해줄 수 있다. 뭘 할수있을지 생각해보자.
export default function* rootSaga(){
yield all([
fork(watchLogin)
])
}
sagas에 rootSaga를 만들고 비동기 처리를 할 함수를 만들어준다.
all은 배열을 받고
fork는 비동기로 처리할 함수들을 실행시켜준다.
fork/call=>차이점 확실하게 인식하기
fork는 비동기함수호출, call은 동기호출함수
yield take('LOG_IN'); => LOGIN이 실행될때까지 기다리겠다.
put을 dispatch라고 생각하면 비슷한 느낌.
yield 가 await이랑 비슷한 느낌을 준다.
( blocking non-blocking)
saga에는 다양한 기능이 있다. 패턴이 비슷하지만 take,put외에도
delay,debounce,throttle, takeLatest, takeEvery, takeMaybe 등와 같은 이펙트 모두 잘 쓸수있도록 흐름을 정확하게 알아두자
saga는 테스트 코드 할때 편하다.
그래서 yield와같은 것들에 대한 사용 이유가 있다.
yield take의 치명적 단점 --> 1회용, 해결 ==> while(true){ yield take}로 생각할 수 있는데, while take는 동기적인 동작/takeEvery는 비동기로 동작한다.
takeLatest => 글쓰기나 로그인 시 클릭이 2번 눌릴 수 있다. takeEvery는 2번 업로드가 되는데, latest로하면 실수로 누른 것은 무시된다(마지막만 실행해준다).
이 말은 동시에 로딩중인 것들 중에 반복된 것만 실행을 해준다는 느낌.
서버에는 request가 되긴함. 응답만을 취소하는 것 (요청에 대한 취소는 못함)
이 부분은 서버에서 검사를 해서 처리
takeLeading => 얘는 앞에것만 실행.
throttle==> 시간을 설정하면, 원하는 시간동안은 똑같은 행위에 대해서 한번만 실행 (게시글을 등록할때 2초등안은 등록을 눌러도 그 시간에는 한번만 보내도록) (takelatest를 대체로 쓰고 중복에 대한 처리를 서버에서 막는다.)
throttling과 debounce =>
스크롤과 같은 것 thorottling, 검색창 한글자 차이마다 결과가 다를 때, 단어가 완성이 됐을때 요청을 보내고싶다=>debouncing
로그인-> 아이디 비밀번호 입력 => loginRequestAction에 파라미터 id와 psw전달
->reducer와 saga에 request 전달 =>각 상태 실패와 성공에 대한 값 반환
반환되면서 바뀐 값들 필요한 컴포넌트에 전달
saga index.js는 reducer와같이 root가 있지만, 크게 복잡하지 않다.
개별적인 폴더에 맞게 옮겨주고, reducer와 묶는다.
