단순히 redux-saga 홈페이지에 있는 튜토리얼을 진행한 상태로 생각을 정리하는 글 입니다.
RN 프로젝트를 진행하면서 기술스택을 정하다 한가지 고민거리가 생겼다.

redux-thunk vs redux-saga

thunk 는 한번 사용해봤고, 요즘 많은 사람들이 thunk 로 작성한것을 saga 로 리빌딩 하는것을 보아 saga 를 사용하기로 했다.

saga workflow

saga 에서는 정해진 패턴(액션타입)이 실행되면 자동으로 함수가 실행되는 기능이 가장 핵심이라고 생각이 된다.

thunk 를 사용했을땐

connect(mapStateToProps, mapDispatchToProps)(Container)

function asyncAction() => (dispatch) => {
	dispatch({type:PENDING});
    return aysncFunction(data).then(res => res).catch(err => err) 
}

를 이용해 비동기 처리를 하였다.

saga를 사용하면

function* watchLoginRequested() {
  yield takeEvery(LOGIN_REQUESTED, loginUser);
}

export default function* rootSaga() {
  yield all([
    watchLoginRequested()
  ])
}

//...
dispatch({ type: loginAction.LOGIN_REQUESTED, payload: { email, password } })

takeEvery or takeLatest 를 이용해 패턴(액션타입) 을 감시한후, 변화를 감지하면 그 뒤에 실행할 함수를 적어준다.

export function* loginUser(action: LoginActionTypes) {
  console.log(action);
  try {
    const user = { token: "asdefgh" };
    // const user = yield call(Api.login, action.payload);
    yield delay(1000)
    yield put({ type: LOGIN_SUCCESS, payload: user });
  } catch (err) {
    yield put({ type: LOGIN_FAILURE })
  }
}

//deley 를 이용해 async 를 흉내낸 코드이다.