Redux-payload 이용한 카운터 프로그램

Payload를 이용해서 간단한 카운터 프로그램을 만들었다.

사용자가 입력한 값으로 계산을 할 수 있는데,

사용자가 input 값에 10을 입력하고 +버튼을 누르면 10이 나오고, 나온 값에 10을 또 더하면 20이 된다.
반대로 20에서 input 값에 5를 입력하고 -버튼을 누르면 15가 되고, 나온 값에 3을 입력하고 -버튼을 또 누르면 12가 되는 프로그램이다.

// App.js

import React , { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addNumber, subtractionNumber } from "./redux/modules/counter"; // Action Creator를 import

const App = () => {

// dispatch 사용하기 위해 선언
const dispatch = useDispatch();

const [number, setNumber] = useState(0);

// useSelector를 이용해서 store의 값 조회
const globalNumber = useSelector((state) => state.counter.number);

const onChangeHandler = (event) => {
  const{value} = event.target;
  // event.target.value는 문자열이다.
  // 이것을 숫자형으로 형변환 해주기 위해서 +를 붙였다.
  setNumber(+value);
  console.log(number); // 콘솔로 onChange 연결 잘 됐는지 확인 -> number은 숫자만 입력 가능함
}

const onClickAddNumberHandler = () => {
  dispatch(addNumber(number));
}

const onClickSubtractionNumberHandler = () => {
  dispatch(subtractionNumber(number));
}

  return (
    <div>
      <div>{globalNumber}</div>
      <input type="number" onChange={onChangeHandler}/>
      <button onClick={onClickAddNumberHandler}>더하기</button>
      <button onClick={onClickSubtractionNumberHandler}>빼기</button>
    </div>
  );
};

export default App;

//counter.js

// Action Value
const ADD_NUMBER = "ADD_NUMBER";
const SUBTRACTION_NUMBER = "SUBTRACTION_NUMBER";

// Action Creator
export const addNumber = (payload) => {
    return {
        type: ADD_NUMBER,
        payload: payload, // ES6에서는 key와 value가 같으면 payload로만 적어도 된다.
    };
}

export const subtractionNumber = (payload) => {
    return {
        type: SUBTRACTION_NUMBER,
        payload, //key와 value가 같아서 payload로만 적었다.
    };
}

// Initial State
const initialState = {
    number: 0,
};

// Reducer 기본형태
const counter = (state = initialState, action) => {
    switch (action.type) {
        case ADD_NUMBER:
            return {
                // state.number(기존의 number)에 action.payload(사용자가 더하길 원하는 값)을 더한다.
                number: state.number + action.payload,
            };
        case SUBTRACTION_NUMBER:
            return {
                // state.number(기존의 number)에 action.payload(사용자가 빼길 원하는 값)을 뺀다.
                number: state.number - action.payload,
            };
        default:
            return state;
    };
}

export default counter;

input 값에 10을 입력하고 더하기 버튼 4번 누른 결과

input 값에 2를 입력하고 빼기 버튼 4번 누른 결과