11Mar2020 TIL

Redux - Thunk

: A thunk is another word for a function. But it’s not just any old function. It’s a special (and uncommon) name for a function that’s returned by another. (출처)

 

단어가 가진 위압감으로 접근하기 어려웠지만, 비동기 처리를 위해 dispatch를 리턴하는 콜백을 함수로 감싸는 것. getDataFetch 겉에 함수는 비동기적으로 처리되게 하기 위한 하나의 장치 같은 느낌이다(뇌피셜. 확실하지 않음). 

//Actions.js
export function getDataFetch(URL) {
  return dispatch => {
    dispatch({ type: GET_FETCHPEND });
    return axios.get(URL)
      .then(res => {
        let plans = res.data;
        dispatch({type: GET_FETCHDATA, plans});
      })
      .catch(error => {
        dispatch({ type: GET_FAILDATA, error });
      });
  };
}

//필요한 component.js 에서...mapDispatchprops..생략
 componentDidMount() {
 	this.props.getDataFetch(URL)
 }