redux-thunk란?

| redux-thunk

redux-thunk는 리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어입니다.
이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있습니다.

함수를 디스패치 할 때에는, 해당 함수에서 dispatch 와 getState 를 파라미터로 받아와야 합니다.
이런 함수를 만들어주는 함수를 thunk 라고 부릅니다.

thunk 사용 예

const getComments = () => (dispatch, getState) =>{
    //여기서는 action을 disaptch 할 수 있습니다.
    //또한 getState 를 이용하여 현재 상태로 조회가 가능합니다.

    const id = getState().post.activeId;

    //요청이 시작했으을 알리는 액션
    dispatch({ type : "GET_COMMENTS" });

    //댓글을 조회하는 프로미스를 반환하는 getComments 가 있다고 가정,

    api.getComment(id) //요청받은 후 
        .then(comments => dispatch({ type:"GET_COMMENTS_SUCCESS", id, comments })) //성공시
        .catch( e => dispatch({ type: "GET_COMMENTS_FAIL" , error : e  });  //실패시
};

thunk 함수에서 async / await 을 사용하여도 무방합니다.

const getComments = () => async (dispatch, getState) =>{
    const id = getState().post.activeId;

    //시작
    dispatch({ type: "GET_COMMENTS"});
    try{
        const comments = await api.getComments(id);
        dispatch({ type:"GET_COMMENTS_SUCCESS", id, comments });
    }catch(e){
        dispatch({ type:"GET_COMMENTS_ERROR", error : e });
    }
}

redux-thunk 설치 및 적용

yarn add redux-thunk

redux-thunk 사용

const store = createStore(
  rootReducer,
  // logger 를 사용하는 경우, logger가 가장 마지막에 와야합니다.
  composeWithDevTools(applyMiddleware(ReduxThunk, logger))
); // 여러개의 미들웨어를 적용 할 수 있습니다.


ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

// getState를 쓰지 않는다면 굳이 파라미터로 받아올 필요 없습니다.
export const increaseAsync = () => dispatch => {
  setTimeout(() => dispatch(increase()), 1000);
};
export const decreaseAsync = () => dispatch => {
  setTimeout(() => dispatch(decrease()), 1000);
};

이런식으로 dispatch 와 getState 를 인자로 가지며 dispatch 를 return 합니다.