Redux Saga
npm install redux-saga
- react / redux 앱에서 비동기적으로 API를 호출해 데이터를 가져오는 일과 같은 부수 효과(Side Effect)를 쉽게 처리하기 위해 사용하는 라이브러리.
- Redux Thunk 다음으로 가장 많이 사용됨.
- 때에 따라 기존 요청을 취소 처리해야 한다거나 여러 개의 API를 순차적으로 호출해야 하는 등의 좀 더 까다로운 비동기 작업을 다루는 상황에 유용함.
- 제너레이터(Generator-ES6기능) 함수를 기반으로 만들어졌음(그래서 살짝 러닝커프 높음)
🍀 Generator 함수
- 제너레이터를 사용하게 되면 비동기 흐름을 표준 동기 코드처럼 보이게 하여 비동기 흐름을 쉽게 읽고 쓰고 테스트 할 수 있음
= 복잡한 워크플로우 관리에 매우 효과적! function뒤에*을 붙여 쓰고(function*),yield를 통해 실행구간 나눔.- 제너레이터 함수를 호출했을 때 한 객체가 반환되는데 이 것이 Generator 또는 Iterator 객체라고 함.
- Generator의 다음 구간은next메서드를 사용해 호출함.
-next메서드 호출 시마다 순차적으로 원소들을 탐색하고,yield키워드가 반환 포인트(코드의 흐름 멈추게 됨)로서value와done프로퍼티를 가진 새로운 객체를 반환시킴.yield키워드로 멈춘 코드의 흐름을 이어가려면 다시next메서드를 호출해서 일시정지 - 재시작 기능을 사용할 수 있음.
- 이러한 제너레이터의 흐름제어를 이용해 redux-saga에서는
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()를 이용해 계속 다음 구간 호출함.🍀 Redux-Saga의 주요 기능들
1. delay
* 설정된 시간 후 실행하는 Promise 객체를 리턴함.
// delay 예시
delay(1000); // 1초 기다리기2. put
* 특정 액션을 dispatch 하도록 함.
// put 예시
put({ type : 'INCREMENT' }); // INCREMENT action을 dispatch 한다.3. takeEvery
* 짧은 시간 안에 여러 번 들어오는 모든 action에 대해 특정 작업을 처리해줌.
//takeEvery 예시
takeEvery(INCREASE, increaseSaga) // 들어오는 모든 INCREASE action에 대해 increaseSaga 함수실행.4. takeLatest
* 짧은 시간 안에 여러 번 들어오는 모든 action 중 가장 마지막으로 들어온 action만 수행함
(이전 액션은 취소 처리)
//takeLatest 예시
takeLatest(INCREASE, increaseSaga) // 들어오는 모든 INCREASE 중 가장 마지막 action에 대해 increaseSaga 함수 실행.5. call
* 함수의 첫 파라미터는 함수, 나머지 파라미터는 해당 함수에 넣은 인수다.
//call 예시
call(()=>func(),1000) // 1초 뒤에 func함수를 실행. 두 번째 파라미터 없으면 기본값 0임.6. all
* 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 동시에 실행시킴.🍀 Redux Saga API
import createSagaMiddleware from 'redux-saga'
// 불러온 api로 saga 미들웨어 생성
const sagaMiddleware = createSagaMiddleware()- createSagaMiddleware
- 활용하여 Saga Middleware를 생성하고, 생성된 Saga Middleware는 Redux에서 제공하는 applyMiddleware API를 호출할 때 인자로 넘겨 Redux Middleware로 추가할 수 있음.
- middleware.run(saga, ...args)
- Saga Middleware의run메서드를 통해 Saga를 실행할 수 있음.
- Saga가 여러 개 존재하는 경우 진입점(Entry Point)에 해당하는 Root Saga를 만들고 이를 실행시켜줄 수 있음.
- Saga가 실행되면 해당 Generator 함수를 호출하여 반복 가능한 Generator를 획득하게 되는데, 해당 Generator의next메서드를 통해 Effect 타입을 확인하고, 해당 Effect에 대해 지시된 동작을 수행하는 작업을 반복하게 된다.
☘️ Redux Saga Effect 함수
Effect : 어떤 기능을 수행하기 위해 주어진 함수와 인자들을 담은 명령 객체를 미들웨어에 전달하는데 이 명령 객체가 = 이펙트
- Effect를 전달받은 Middleware는
yield된 이펙트들을 확인하며 정확한 명령이 포함되었는지 검사 → Effect type에 따라 어떻게 Effect를 수행할지 결정.
Front-end