17.7.2 useDispatch를 사용하여 액션 디스패치하기

    이번에는 useDispatch라는 Hook에 대해 알아봅시다. 이 Hook은 컴포넌트 내부에서 스토어의 내장 함수 dispatch를 사용할 수 있게 해 줍니다. 컨테이너 컴포넌트에서 액션을 디스패치해야 한다면 이 Hook을 사용하면 됩니다. 사용법은 다음과 같습니다.

    const dispatch = useDispatch();
    dispatch({ type: 'SAMPLE_ACTION' });

    이제 CounterContainer에서도 이 Hook을 사용하여 INCREASEDECREASE 액션을 발생시켜 봅시다.

    containers/CounterContainer.js

    import React from 'react';
    import { useSelector, useDispatch } from 'react-redux';
    import Counter from '../components/Counter';
    import { increase, decrease } from '../modules/counter';
    
    const CounterContainer = () => {
      const number = useSelector(state => state.counter.number);
      const dispatch = useDispatch();
      return (
        <Counter
          number={number}
          onIncrease={() => dispatch(increase())}
          onDecrease={() => dispatch(decrease())}
        />
      );
    };
    
    export default CounterContainer;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.