redux-saga

redux-saga

- redux-saga는 redux-thunk 다음으로 많이 사용하는 비동기 작업 관련 미들웨어다.
- redux-thunk는 함수 형태의 액션을 디스패치해 미들웨어에서 해당 함수에 스토어의 dispatch와 getState를 파라미터로 넣어서 사용하는 원리로, 구현한 thunk 함수 내부에서 원하는 API 요청도 하고, 다른 액션을 디스패치하거나 현재 상태를 조회하기도 했다.

- 대부분의 경우에는 redux-thunk로 충분히 기능을 구현할 수 있으나, redux-saga는 좀 더 까다로운 상황에서 유용하다.

1. 기존 요청을 취소 처리해야 할 때(불필요한 중복 요청 방지)
2. 특정 액션이 발생했을 때 다른 액션을 발생시키거나, API 요청 등 리덕스와 관계 없는 코드를 실행할 때
3. 웹소켓을 사용할 때
4. API 요청 실패 시 재요청해야 할 때

패키지 설치

$ yarn add redux-saga

 

사가(saga)

- 모듈 작성 시 액션과 액션 생성 함수, 제너레이터 함수를 만드는데, 이 제너레이터 함수를 사가(saga)라고 한다.

function* increaseSaga(){
    yield delay(1000);
    yield put(increase());
}

function* decreaseSaga(){
    yield delay(1000);
    yield put(decrease());
}

export function* counterSaga(){
    yield takeEvery(INCREASE_ASYNC, increaseSaga);
    yield takeLatest(DECREASE_ASYNC, decreaseSaga);
}

 

Effect Creator

delay	지정한 ms만큼 지연
put	특정 액션을 디스패치
takeEvery	들어오는 모든 액션에 대해 특정 작업을 처리
takeLatest	기존에 진행 중이던 작업이 있다면 취소 처리하고, 가장 마지막으로 실행된 작업만 수행
call	Promise 반환 함수를 호출하고, 기다릴 수 있음
all	여러 사가를 합쳐 줌
select	store 내의 state를 조회

rootSaga

- 리덕스 모듈을 작성한 후에는 rootSaga를 만들고 이를 적용해야 한다.

- rootSaga 작성

import { all } from 'redux-saga/effects';
import { counterSaga } from './counter'

export function* rootSaga(){
	yield all([counterSaga()];
}

 

- 다음으로 스토어에 redux-saga 미들웨어를 적용한다.

 

import { composeWithDevTools } from 'redux-devtools-extension';
import { applyMiddleware, createStore} from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer, { rootSaga } from './modules';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(sagaMiddleware)));

sagaMiddleware.run(rootSaga);