Redux-Saga #1

Redux-Saga란?

Redux-Saga는 비동기 데이터처리, 에러 핸들링 과 테스트를 좀 더 쉽고 효율적으로 관리하기 위해 사용되는 Redux middleware이다.
https://redux-saga.js.org/logo/0800/Redux-Saga-Logo-Landscape.png

• Redux-Saga를 사용하기 위해서는 사용자가 작성한 Saga들의 리스트를 담고 있는 Saga middleWare를 생성한 후에 Redux store에 연결해야한다.

// saga.js
export function* helloSaga() {
  console.log("Hello Sagas!");
} // 화살표 함수로는 generator 정의불가

// store.js
import { createStore, applyMiddleware } from "redux";
import createSagaMiddleware from "redux-saga";
import rootReducer from "./reducers/root";
import { helloSaga } from "./reducers/saga";

const sagaMiddleware = createSagaMiddleware();

const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
// Saga 사용 전에 반드시 applyMiddleware를 이용해서 연결해야한다.
sagaMiddleware.run(helloSaga);

export const action = (type) => store.dispatch({ type });
export default store;

• 다양한 saga를 사용하고 싶을 때는 all을 사용해서 하나의 saga로 묶어서 사용한다.

import { all } from "redux-saga/effects";

const INCREMENT = "INCREMENT";
const INCREMENT_ASYNC = "INCREMENT_ASYNC";

function* helloSaga() {
  console.log("Hello saga!");
}
export function* incrementAsync() {
  ...
}

export function* watchIncrementAsync() {
  ...
}

export default function* rootSaga() {
  yield all([helloSaga(), watchIncrementAsync()]);
}

Effect

• effect는 middleware에 의해 수행되는 명령을 담고 있는 자바스크립트 객체이다. Saga는 자바스크립 객체인 effect나 Promise 형태인 명령을 middleware로 yield하고 middleware는 그 명령을 해석,처리하고 그 결과를 다시 Saga에게 돌려준다.

put

• 액션을 dispatch하고 싶을 때 객체로 만들어 명령을 만들 때 사용한다.

call

• 함수를 객체로 만들어 명령하고 싶을 때 사용한다.

// 실제 실행을 saga안에서 한다.
function* fetchProducts(dispatch) {
  const products = yield Api.fetch('/products')
  dispatch({ type: 'PRODUCTS_RECEIVED', products })
}
import { call, put } from 'redux-saga/effects'
// saga는 명령만 하고 실제 실행은 middleware에서 한다.
function* fetchProducts() {
  const products = yield call(Api.fetch, '/products')
  yield put({ type: 'PRODUCTS_RECEIVED', products })
}

take

• put이 액션을 dispatch하는 명령을 만들고 push한다면 take은 dispatch한 액션을 pull한다.

function* loginFlow() {
  while (true) {
    yield take('LOGIN')
    // dispatch 된 LOGIN 액션을 잡아서 Login logic을 실행한다.
    yield take('LOGOUT')
    // ... perform the logout logic
  }
}

takeEvery

• 특정액션 혹은 모든 액션에 대해 pull한 후에 특정 작업을 처리해준다. 여러번 같은 액션이 발생해도 주어진 작업을 모두 실행한다.
  
  

takeLatest

• 특정액션을 pull한 후에 특정 작업을 처리해준다. 기존에 pull한 액션이 있으면 기존의 액션으로 진행 중이던 작업을 취소하고 최근에 pull한 액션의 작업을 진행한다.