Redux-Saga란?
- Redux-Saga란 비동기 작업을 처리하기 위한 미들웨어이다.
- 액션을 모니터링을 하며 특정 액션이 발생했을때 미리 정해둔 로직에따라 특정 작업이 이루어지는 방식이다.
(특정 Javascript를 실행하거나, 다른 Action을 Dispatch 할수도있고, 현재 State를 불러올 수 도있다.)
- 순수함수들로 로직을 처리할 수 있으며, 순수함수로 이루어지다보니 사이드 이펙트도 적고 테스트 코드를 작성하기에 유리하다.
- 제너레이터라는 특수한 형태의 함수로 구현된다.
- Generator는 함수를 구현할 때, 함수의 실행을 특정 구간에 멈추게 하거나 원하는 시점으로 돌아가게 할 수 있다.
- 결과값을 여러번 리턴하게 할 수 있다.
- 제너레이터 함수를 만들때는 function* 이라는 키워드를 사용한다.
- 제너레이터 함수를 통해 객체가 반환된다.
- 비동기 작업 진행시, 기존 요청 취소
- 특정 액션이 발생했을때 이를 구독하고 있다가 다른 액션을 디스패치하거나 특정 자바스크립트 코드 실행
- API요청 실패시 재요청 가능
- 효율적인 코드관리
리덕스 사가 사용 가이드
import { call, put, takeEvery } from 'redux-saga/effects';
import * as FIIL_ME_IN from '../api/FIIL_ME_IN';
import { createRequestActionTypes } from '../api/createRequestSaga';
const [
LOGIN_USER,
SUCCESS,
FAILED
] = createRequestACtionTypes('userLogin/LOGIN_USER')
export const loginUserList = (userData) => ({
type : SOME_TYPE,
payload : userData,
})
const dispatch = dispatch();
dispatch(loginUserList());
export function* loadUserLoginSaga(action){
try {
const loadResult = yield call(loadUserApi.loadUserAsync, action.payload);
yield put({
type : SUCCESS,
payload : loadResult,
});
} catch (e) {
yield put({
type : FAILED,
payload : e,
});
}
}
export function* userLoginSaga(){
yield takeEvery(LOGIN_USER,loadUserLoginSaga);
}
export default function SOME_REDUCER(state = {}, action){
switch(action.type){
case SOME_TYPE :
return {
...state,
};
case SUCCESS :
return {
...state,
SOME_KEY: action.payload,
};
case FAILED :
return {
...state,
SOME_ERROR: SOME_VALUE,
};
default:
return state;
}
}
참조