Redux-Saga 이해하기

큰 형 Redux의 다른 작은형제인 Redux-Saga의 사용법을 알아보자.

 

Redux-Saga는 Redux-thunk와도 비교가 많이 되는 라이브러리인데 그 둘의 차이점을 비교해놓은 글이 많으니 한번 찾아보길 권한다.

 

비교글

https://velog.io/@dongwon2/Redux-Thunk-vs-Redux-Saga%EB%A5%BC-%EB%B9%84%EA%B5%90%ED%95%B4-%EB%B4%85%EC%8B%9C%EB%8B%A4-     

 

 

오늘은 실직적인 사용법과 흐름을 한 번 직접 살펴보겠다. 

 

 

npm install redux-saga

 

Saga의 가장 큰 특징은 Generator 함수를 쓰는 것인데 이 부분은 

 

이런 글들을 찾아보면서 보충해야 될 부분이다. 

https://meetup.toast.com/posts/140

 

대략적인 흐름은 

https://hankyeolk.github.io/2021/02/07/reduxSaga.html

 

아래 사진과 같이 action 과 reducer 사이에 saga가 위치해서 testing, 비동기 작업 등을 다 거친후에 reducer 로 전달하는 방식이다. 

 

action -> reducer 가 아닌

action -> saga -> reducer 인 것이다. 

 

Action 함수 파일을 보면 

 

바로 기존의 방식과 다르게 action 내에서는 다른 작업을 하지 않고 type만 전달해주고 

 

 

saga.js

 

import {put, takeEvery, call, all, race} from 'redux-saga/effects';
import { FIND_EMPLOYEE_SAGA, FIND_CUSTOMER_SAGA, FIND_EMPLOYEE, FIND_CUSTOMER } from '../types';


export function* findCustomerSaga(){
  const url = "https://randomuser.me/api/";
  const setHeaders = { headers: { "Content-Type": "application/json" } };
  let res = yield fetch(url, {setHeaders});
  res = yield res.json();
  let customer = res.results[0];
  yield put({type:FIND_CUSTOMER, payload:customer}) 
  
}


export function* watchFindEmployeeSaga(){
  yield takeEvery(FIND_EMPLOYEE_SAGA, findCustomerSaga)  // action 에서  FIND_EMPLOYEE_SAGA 문자열의 타입이 오면
  }                                                      // findCustomerSaga를 실행

 

userReducer.js

const INITIAL_STATE = {
  employee: { name: { first: "" } },
  customer: { name: { first: "" } },
};

const userReducer = (state = INITIAL_STATE, action) => {
  const { type, payload } = action;
  switch (type) {
    case FIND_EMPLOYEE:
      return {
        ...state,
        employee: payload,
      };
    case FIND_CUSTOMER:
      return {
        ...state,
        customer: payload,
      };
    default:
      return state;
  }
};

 

 

전체적인 사용법만 알아보았고 

 

더 자세히 단계별로 그리고 put, take, call, race, takeLatest 등 여러 이펙트 들은 나중에 시간이 되면 하나하나 정리하면서 글 올리겠다. 

 

포인트는 

* saga는 generator 함수가 쓰인다. 

* action -> reducer 로 가기 전에 saga를 들린다. 

* action 에서 비동기로 로직을 처리하고 넘기는게 아니라 saga로 action type 만 전해주고 saga에서 처리한다. 

* saga에서 watcher 가 해당 액션타입이 들어오면 그에 맞는 함수로 보내준다. 

* yield 키워드, put, call, take, race, takeLatest, takeEvery 등 많은 이펙트들이 있다. 

* 전체적으로 thunk보다 추가로 관리 할게 생기고 보일러 플레이트도 늘지만 상위호환의 기능을 가지고 있다.