다음으로 나오는 react-redux 관련 함수는 mapDispatchToProps() 함수입니다.
이름은 앞에 나온 mapStateToProps() 함수와 거의 유사하죠?
이 함수 역시 앞에 나온 mapStateToProps() 함수와 동일하게 react-redux 라이브러리에서 제공하는 함수가 아니라 개발자가 직접 구현해야하는 함수입니다.

mapDispatchToProps() 함수는 dispatch를 props로 매핑시켜주는 함수입니다.

조금 더 자세히 풀어써보면,

“Mapping Redux dispatch to target React component props.”

라고 할 수 있습니다.

한글로 정의하면 mapDispatchToProps() 함수는 Redux dispatch를 타겟 리액트 컴포넌트의 props로 연결시켜주는 역할을 하는 함수입니다.

그럼 mapDispatchToProps() 함수는 어떻게 작성해야 하는지 살펴보도록 하겠습니다.

function mapDispatchToProps(dispatch, ownProps?)

먼저 mapDispatchToProps() 함수의 파라미터는 dispatch와 ownProps가 있습니다.

첫 번째 파라미터인 dispatch는 우리가 앞에서 실습을 하면서 여러번 사용했던 Redux Store의 dispatch() 함수입니다.
Action을 실제로 발송하는 역할을 하는 함수죠.

그리고 두 번째 파라미터인 ownProps는 앞에서 배운 mapStateToProps() 함수의 두 번째 파라미터와 동일하게, mapping시킬 타겟 컴포넌트가 갖고 있는 자체 props를 의미합니다.
ownProps를 이용해서 원하는 형태로 Action객체를 만들고 dispatch할 필요가 있을 때 사용하게 됩니다.

mapDispatchToProps() 함수도 역시 JavaScript 객체를 리턴해야 합니다.
다만, 이 객체의 각 필드는 Redux Action을 Dispatch하는 과정이 들어있는 함수여야 합니다.
그리고 이 함수가 리턴하는 객체도 역시 리액트 컴포넌트의 props로 전달 됩니다.

그럼 실제 예시 코드를 한 번 볼까요?

function mapDispatchToProps (dispatch) {
    return {
        increaseCount: () => {
            dispatch({ type: 'INCREASE_COUNT' });
        },
        decreaseCount: () => {
            dispatch({ type: 'DECREASE_COUNT' });
        },
    }
}

이 코드는 간단하게 작성해본 mapDispatchToProps() 함수입니다.

Counter 애플리케이션에서 카운트를 증가시키는 Action과 감소시키는 Action을 Dispatch하기 위한 함수를 만들었고, 이렇게 만든 함수를 객체 형태로 만들어서 리턴하고 있습니다.
그리고 여기에서는 Action 객체를 직접 만들었는데, Action 객체를 직접 만들지 않고 Action Creator 함수를 사용해도 됩니다.

다음 코드는 mapDispatchToProps() 함수의 두 번째 파라미터인 ownProps를 사용해서 Action 객체를 만들고, dispatch하는 예시 코드입니다.

function mapDispatchToProps (dispatch, ownProps) {
    return {
        increaseCount: () => {
            dispatch({
                type: 'INCREASE_COUNT', 
                counterId: ownProps.counterId,
            });
        },
        decreaseCount: () => {
            dispatch({
                type: 'DECREASE_COUNT',
                counterId: ownProps.counterId,
            });
        },
    }
}

이 코드처럼 ownProps는 타겟 리액트 컴포넌트의 props에 들어있는 값을 사용해서 Action 객체를 만들고 이를 dispatch 할 때 사용합니다.

이것은 mapDispatchToProps() 함수의 역할을 그림으로 나타내본 것입니다.

보시는 것처럼, mapDispatchToProps() 함수는 Redux Store에서 제공하는 dispatch() 함수를 이용해서 원하는 Action을 dispatch할 수 있도록 만든 함수들을 컴포넌트로 매핑시켜줍니다.
이 그림에서는 increaseCount() 함수와 decreaseCount() 함수가 매핑된 것을 볼 수 있습니다.