컨텐츠 내 위젯


Redux-saga Angular / React

Redux Saga는 기존 redux에서 서버와의 비동기 통신을 담당하는 라이브러리 이다. 보통 이건 순수함수를 벗어나게 되는 데이터 송수신 등 좀 더 순수함수 스럽게(?) 보이도록 바꿔주는 역할이다.

만약 Redux Saga를 쓰지 않으면, 외부 API에서 값을 받아오는 코드는 어떻게 자이게 될까? 프로미스 콜백 지옥이 될 것이다. 게다가 한 dispatch가 한 action만 바라보는 집중도가 떨어지게 된다. action에다가 콜백 혹은 프로미스로 본인의 작업 완료시 또 뭘 해야할지를 가지고 있어야 하니까.

Redux Saga같은 경우는 별개의 공간에서 dispatch 및 store를 관찰(?)한다. 그리고 그에 따른 행위를 별개로 지정할 수 있기 때문에 dispatch 및 action 등이 더러워질 일이 없다. 이 때 Saga가 가지는 개별적인 행위는 task라고 한다.

예시는 다음과 같다.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const memoAction = function*() {
yield put({ type: TYPES.LOADSTART, payload: "off" });
const movie = yield getMovieData();
yield put({ type: TYPES.ADDMOVIE, payload: movie });
yield delay(1000);
yield put({ type: TYPES.LOADEND, payload: "on" });
};
export const rootSaga = function*() {
/*
saga 에는 여러가지 메서드들이 있다. (import 해서 쓸 수 있다)
take, takeLatest -> 특정 액션 감시후 비동기 로직 동작하도록 할 수 있음.
put -> dispath 여기서 바로 액션 실행?
delay -> 실행 지연.
fort -> 새로운 하위 태스크 생성, 즉 연속해서 담에 뭐할지를 붙여주는것. (블럭X)
call -> 새로운 하위 태스크 생성, 즉 연속해서 담에 뭐할지를 붙여주는것. (블럭o)
state -> 스토어에서 가져올때 사용. (블럭o)
*/
// 실행을 리스너가 받기까지 멈춰놓고 next를 호출하는 방식이라 저렇게 제너레이트를 걸어놓아야 하는 듯 함
yield takeLatest(TYPES.ADDCLICK, memoAction);
};


이걸 바로 쓸 수 없고 redux store 에다가 middleware로 등록해줘야하 한다.

1
2
3
4
5
6
7
8
import createSagaMiddleware from "redux-saga";

// 미들웨어 -> 양쪽에서 데이터를 주고 받을 때 중간에서 매개역할 해주며 원래 없는 기능을 불어넣는것.
export const sagaMiddleware = createSagaMiddleware();
export const rootStore = createStore(
rootReducer,
applyMiddleware(sagaMiddleware) // 스토어에 미들웨어 등록
);


자세한 예제는 다음 주소에서 확인할 수 있다. 





덧글

댓글 입력 영역