npm install redux-saga
- react / redux 앱에서 비동기적으로 API를 호출해 데이터를 가져오는 일과 같은 부수 효과(Side Effect)를 쉽게 처리하기 위해 사용하는 라이브러리.
- Redux Thunk 다음으로 가장 많이 사용됨.
- 때에 따라 기존 요청을 취소 처리해야 한다거나 여러 개의 API를 순차적으로 호출해야 하는 등의 좀 더 까다로운 비동기 작업을 다루는 상황에 유용함.
- 제너레이터(Generator-ES6기능) 함수를 기반으로 만들어졌음(그래서 살짝 러닝커프 높음)
function
뒤에 *
을 붙여 쓰고( function*
), yield
를 통해 실행구간 나눔.next
메서드를 사용해 호출함.next
메서드 호출 시마다 순차적으로 원소들을 탐색하고, yield
키워드가 반환 포인트(코드의 흐름 멈추게 됨)로서 value
와 done
프로퍼티를 가진 새로운 객체를 반환시킴. yield
키워드로 멈춘 코드의 흐름을 이어가려면 다시 next
메서드를 호출해서 일시정지 - 재시작 기능을 사용할 수 있음. action
을 모니터링하고 있다가 구독하고 있는 특정 액션이 발생했을 때 원하는 비동기 함수를 실행시킬 수 있음. // generator함수 예시
function* generatorFunc(){
yield 1;
yield 2;
return 3;
};
const generator = generatorFunc();
// 콘솔 화면
generator.next(); // {value:1, done:false}
generator.next(); // {value:2, done:false}
generator.next(); // {value:3, done:true}
//generator.next()를 이용해 계속 다음 구간 호출함.
* 설정된 시간 후 실행하는 Promise 객체를 리턴함.
// delay 예시
delay(1000); // 1초 기다리기
* 특정 액션을 dispatch 하도록 함.
// put 예시
put({ type : 'INCREMENT' }); // INCREMENT action을 dispatch 한다.
* 짧은 시간 안에 여러 번 들어오는 모든 action에 대해 특정 작업을 처리해줌.
//takeEvery 예시
takeEvery(INCREASE, increaseSaga) // 들어오는 모든 INCREASE action에 대해 increaseSaga 함수실행.
* 짧은 시간 안에 여러 번 들어오는 모든 action 중 가장 마지막으로 들어온 action만 수행함
(이전 액션은 취소 처리)
//takeLatest 예시
takeLatest(INCREASE, increaseSaga) // 들어오는 모든 INCREASE 중 가장 마지막 action에 대해 increaseSaga 함수 실행.
* 함수의 첫 파라미터는 함수, 나머지 파라미터는 해당 함수에 넣은 인수다.
//call 예시
call(()=>func(),1000) // 1초 뒤에 func함수를 실행. 두 번째 파라미터 없으면 기본값 0임.
* all 함수를 사용해 generator함수를 배열의 형태로 넣어주면, generator함수들이 병행적으로 동시 실행됨.
* 동시 실행되고 모두 resolve 될 때까지 기다림.
// all 사용 예시
export function* getDataSaga(){
yield all([
getSaga1(DATA_REQUE, login)
getSaga2(DATA_RES, logout)
])
}
export function* realSaga(){
yield all([
getDataSaga()
])
}
*** all = 배열 안의 여러 saga 동시에 실행시킴.
import createSagaMiddleware from 'redux-saga'
// 불러온 api로 saga 미들웨어 생성
const sagaMiddleware = createSagaMiddleware()
run
메서드를 통해 Saga를 실행할 수 있음.next
메서드를 통해 Effect 타입을 확인하고, 해당 Effect에 대해 지시된 동작을 수행하는 작업을 반복하게 된다.Effect : 어떤 기능을 수행하기 위해 주어진 함수와 인자들을 담은 명령 객체를 미들웨어에 전달하는데 이 명령 객체가 = 이펙트
yield
된 이펙트들을 확인하며 정확한 명령이 포함되었는지 검사 → Effect type에 따라 어떻게 Effect를 수행할지 결정.