13Mar2020 TIL

redux-saga

: 비동기적인 일 (data fetch 같은)처럼 side effect 라고 불리는 일련의 일들을 처리하는 라이브러리. 콜백의 지옥을 사용하지 않고, test 가 용이하고 관리가 쉬워 thunk 보다 자주 사용된다. 

 

//index.js 시조 component
import createSagaMiddleware from "redux-saga";
import { getFetchData } from "./actions/actions";

const sagaMiddleware = createSagaMiddleware();
const store = createStore(todoReducer, applyMiddleware(sagaMiddleware, logger));

sagaMiddleware.run(getFetchData);

시조 컴포넌트에 redux-saga 미들웨어를 사용할 것이며, 내가 정의한 saga generator와 연결해주는 일을 해줘야 한다.

 

//actions.js

import { put } from "redux-saga/effects";
export function* getFetchData(URL) { //function* <- * 모양 중요!
  try {
    yield axios.get(URL).then(res => {
     //중략 여기서 plans를 추출함
    });
    yield put({
      type: GET_FETCHDATA,
      dataFetched: plans  // 위에서 추출한 plans 임
    });
  } catch (error) {
    yield put({ type: GET_FAILDATA, error });
  }
}

saga generator는 일반 function 과 구분하기 위해 function 옆에 *를 붙여줘야 한다. yield 라는 키워드를 사용해 함수 내의 프로세스를 순차적으로 실행시킨다. yield put은 redex의 action 크리에이터 실행과 dispatch를 합친 기능이다. 

 

 

궁금한 점은 지난번 thunk는 페치된 데이터를 업데이트 해서 화면에 그려주는 식으로 구성되었는데. 

//thunk 
export default class Main extends Component {
  componentDidMount() {
    const { fetchData } = this.props;
    fetchData();
  }
  render() {
    return (
     //중략
    );
  }
}
//중략 
const mapDispatchToProps = dispatch => {
  return {
    fetchData: () => dispatch(getFetchData())
  };
};

Main = connect(null, mapDispatchToProps)(Main);

 

saga를 이용하니 이런식의 패턴에서 에러를 일으켜서 해당 부분을 다음과 같이 지웠더니 에러가 해결되었다.

// saga
export default class Main extends Component {
  componentDidMount() {
  }

  render() {
    return (
     //중략
    );
  }
}

 

왜 그런걸까? generator yield put 기능이 해당 부분을 대신해주는 것일까? 

 

---

토요일에 서버 노드 부분 배운 내용을 확인하는 시간이 있어서 그동안 작성했던 블로그와 학습 자료를 봐야하는데, 복습은 왜이렇게 하기가 싫은 걸까..? 복습 싫어...ㅎㅎㅎ 어릴 때부터 했던거 또하는 게 너무너무 싫었는데, 그 버릇 어디 안 가는 거 같다. 새로운 내용을 배우는 건 너무 재밌지만, 했던 내용을 복습하는 건 너무 지옥이야... 흐앙... 일끝나고 골프 연습 한시간 하고 저녁 먹고 지옥의 복습을 시작해야겠다.