(React)카운터 Redux로 만들기 - 4

가장 기본 예제인 카운터를 redux를 이용해 만들어 볼 거다
항상 리덕스를 사용할 줄 모르는 것에 부끄러움이 가득했는데 이번 기회에 타파할 예정이다.
참고 유데미 강의
React 완벽 가이드 with Redux, Next.js, TypeScript

 

(React)카운터 Redux로 만들기 -3

그전 코드는 위에 글을 가면 확인할 수 있습니다.

 

이번에는 5가 증가하는 버튼을 만들어 볼 예정입니다.

 

counter.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const dispatch = useDispatch();
  const counter = useSelector((state) => state.counter);

  const incrementHandler = () => {
    dispatch({ type: 'increment' });
  };

  const increaseHandler = () => {
    dispatch({ type: 'increase', payload: 5 });
  };
  const decrementHandler = () => {
    dispatch({ type: 'decrement' });
  };
  const toggleCounterHandler = () => {};
  return (
    <>
      <h1>Redux Counter</h1>
      <div>{counter}</div>
      <button onClick={incrementHandler}>increment</button>
      <button onClick={increaseHandler}>increase by 5</button>
      <button onClick={decrementHandler}>decrement</button>

      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </>
  );
};

export default Counter;

 

increaseHandler 함수와 버튼을 추가로 생성해주시면 됩니다.

그다음, increaseHandler를 자세히 보시면 type 외에 payload를 확인하실 수 있습니다. 

바로 이것을 통해 5를 넘겨 줄 수 있습니다. 

아 물론 index.js 함수 안에 있는 함수에서 + 5를 해줘도 되지만, 그런 하드코딩을 지양해야 하니까요

 

index.js

import { legacy_createStore } from 'redux';

const counterReducer = (state = { counter: 0, name: '싼쵸' }, action) => {
  if (action.type === 'increment') {
    return {
      counter: state.counter + 1,
    };
  }
  if (action.type === 'increase') {
    return {
      counter: state.counter + action.payload,
    };
  }

  if (action.type === 'decrement') {
    return {
      counter: state.counter - 1,
    };
  }
  return state;
};
const store = legacy_createStore(counterReducer);

export default store;

Counter.js에서 적은 payload를 action.payload를 통해 불러오는 것을 확인할 수 있습니다.

그리고 Counter.js에서 dispatch 안에 적은 type, payload를 사용할 때는 앞에 action을 붙여서 사용하는 것을 확인할 수 있습니다.

 

잘 작동하시나요?? 

그럼 한번 5를 10으로 바꿔서 한번 해보세요 !!