리액트 - redux-thunk

액션 객체가 아닌 함수를 디스패치 할수 있는 미들 웨어이다.

먼저 redux-thunk 를 설치한다

$ yarn add redux-thunk

이전에 만들었던 카운터 앱에서 버튼을 클릭하면 1초뒤에 증가/감소가 되는 기능을 만들어보자.

counter.js 모듈에서 increaseAsync와 decreaseAsync를 작성한다.

export const increaseAsync = () => (dispatch) => {
    setTimeout(() => {
        dispatch(increase());
    }, 1000);
}

export const decreaseAsync = () => (dispatch) => {
    setTimeout(() => {
        dispatch(decrease());
    }, 1000);
}

dispatch를 파라미터로 해서 버튼을 누르는 순간 1초 뒤에 increase/decrease 액션 생성함수가 호출되는 방식이다.

CounterContainer 에서 Counter에게 props로 전송하는 onDecrease와 onincrease의 내용을 수정한다. dispatch되는 생성함수를 increaseAsync와 decreaseAsync로 수정한다.

  const onIncrease = () => {
        dispatch(increaseAsync());
    }

    const onDecrease = () => {
        dispatch(decreaseAsync());
    }

실행결과

버튼을 클릭하고 1초뒤 증가/감소되는 걸 볼수 있다. 야호