React - Redux(payload)

Payload

이전에 만들었던 프로그램은 버튼을 누르면 +1되거나, -1이 되는 구조의 프로그램이었다. 그런데 그러한 형태가 아니라 유저가 input태그에 임의로 작성한 숫자만큼을 증가시키고 감소시켜야 한다면 어떻게 해야할까?

우리는 이제부터 액션객체에 특정한 '동작' 뿐만 아니라 그 동작을 '얼마만큼' 할 것인지 등의 추가적인 요청도 실어서 보낼 필요성이 생겼다. 이렇게 액션객체에 같이 담아 보내주는 것을 우리는 payload라고 한다.

Payload 사용법

위의 예시를 코드로 구현하면 다음과 같다.

// src/App.js


import React from "react";
import { useState } from "react";

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

  const onChangeHandler = (event) => {
    const { value } = event.target;
		// event.target.value는 문자열 입니다.
		// 이것을 숫자형으로 형변환해주기 위해서 +를 붙여 주었습니다.
    setNumber(+value);
  };

	// 콘솔로 onChangeHandler가 잘 연결되었는지 확인해봅니다.
	// input에 값을 넣을 때마다 콘솔에 그 값이 찍히면 연결 성공!
  console.log(number);

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

export default App;

이렇게 구현하면 input태그에 입력된 값을 number라는 변수에 저장하게 된다.
이제 모듈을 작성해야 한다. 모듈에 작성해야할 것은 총 5개이다.
강의에서는 모듈을 만들 때, 빈 페이지에 만들어야 할 것을 미리 리스트업하고 작성한다고 한다. 구성요소가 많기 때문에 빼먹지 않기 위해서.

// src/redux/modules/counter.js

// Action Value

// Action Creator

// Initial State

// Reducer

// export default reducer

전부 작성하면 다음과 같이 된다.

// src/redux/modules/counter.js

// Action Value
const ADD_NUMBER = "ADD_NUMBER";

// Action Creator
export const addNumber = (payload) => {
  return {
    type: ADD_NUMBER,
    payload: payload,
  };
};

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

// Reducer
const counter = (state = initialState, action) => {
  switch (action.type) {
    case ADD_NUMBER:
      return {
				// state.number (기존의 nubmer)에 action.paylaod(유저가 더하길 원하는 값)을 더한다.
        number: state.number + action.payload,
      };
    default:
      return state;
  }
};

// export default reducer
export default counter;

이제 UI와 counter모듈을 연결하기 위한 작업을 한다.

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

// 4. Action Creator를 import 합니다.
import { addNumber } from "./redux/modules/counter";

const App = () => {
	// 1. dispatch를 사용하기 위해 선언해줍니다.
  const dispatch = useDispatch();
  const [number, setNumber] = useState(0);
  const globalNumber = useSelector((state) => state.counter.number);

  const onChangeHandler = (event) => {
    const { value } = event.target;
    setNumber(+value);
  };

	// 2. 더하기 버튼을 눌렀을 때 실행할 이벤트핸들러를 만들어줍니다.
  const onClickAddNumberHandler = () => {
		// 5. Action creator를 dispatch 해주고, 그때 Action creator의 인자에 number를 넣어줍니다.
    dispatch(addNumber(number));
  };

  return (
    <div>
      <div>{globalNumber}</div>
      <input type="number" onChange={onChangeHandler} />
			{/* 3. 더하기 버튼 이벤트핸들러를 연결해줍니다. */}
      <button onClick={onClickAddNumberHandler}>더하기</button>
      <button>빼기</button>
    </div>
  );
};

export default App;