Redux :: 미들웨어_ redux-saga 이펙트

rootSaga를 만들고, 사용하고 싶은 비동기 액션을 사가(redux-saga에서는 제너레이터 함수를 사가라고 부른다.)를 사용해 만든다. 사가는 사가이펙트라는 유틸 함수들을 사용한다.

 

saga Effect

all( [ ] )	배열의 모든요소를 한 번에 실행한다.
fork(함수, para?)	비동기 함수 호출한다. (non-blocking)	ex)    일반적인 호출: logInAPI(action.data)    call, fork를 사용: call(logInAPI, action.data)  첫번째 인수가 함수, 두번째 인수가 첫번째 인자.
call(함수, para?)	비동기 함수를 동기함수처럼 호출한다.    (값을 받아 올때까지 기다린 후 코드 실행.   yield가 await과 같은 역할을 한다.)
take(액션, 함수)	액션이 실행되면 함수를 실행한다. 하지만 1회용이다.   (1회용을 해결하기 위해서는 while(true)를 사용하거나 takeEvery를 사용한다.)
put(액션)	새로운 액션을 디스패치한다.
takeEvery(액션, 함수1)	특정 액션 타입에 대하여 모든 액션(saga)들을 처리한다.
takeLatest(액션, 함수)	디스패치된 가장 마지막 액션만 처리한다. (더블클릭 실수 방지)   (동일한 타입의 새로운 액션이 디스패치되면 나머지 응답을 취소하고 마지막 요청만 응답한다.   하지만 요청을 취소하는것은 아니므로 서버쪽으로도 두번 응답이 있어서 검증이 필요하다. )
takeLeading(액션, 함수)	디스패치된 제일 첫번째 액션만 처리한다.
throttle(액션, 함수, ms)	마지막 함수가 호출된 후 ms 시간이 지나기 전에 호출되지 않는다.   (ms 시간동안 요청자체를 한번만 하도록 막음. 스크롤링에 많이 사용함)
debounce	ms 시간동안 연이어 호출된 함수 중 마지막 함수만 호출. (주로 검색창에 많이 사용)
delay(ms)	setTimeout과 같은 역할

 

 

사가는 다음과 같은 패턴으로 많이 사용된다.이펙트 앞에는 yield를 붙여 사용한다.(test에 용이)

logInAPI :

서버에 요청 보냄.

logIn : 

서버로 요청을 보낸 결과를 받음.

try catch를 사용

성공결과는 result.data,

실패결과는 error.response.data에 담겨있다.

 

 

 

 

 

LOG_IN_REQUEST (액션)이 logIn 함수의 매개변수로 들어간다.

 

 

 

 

 

 

 

 

참고
- https://react.vlpt.us/redux-middleware/10-redux-saga.html
- https://mskims.github.io/redux-saga-in-korean/recipes/
- 제로초 노드버드 강의