Redux payload

• 지금까지 action 객체는 type만 가지고 있었다.
• action 객체는 type과 payload라는 두 가지 값으로 이루어진 객체이다.]
• payload : input으로 '3'을 받고 +버튼을 누르면 3이 증가 할 경우 3이라는 값을 전달해주는 역할을 하는게 payload이다.

📁 redux / moduls / counter

//action value
//counter modul에서만 사용사는 것이 아니라 export 해준다
const PLUS_ONE  = "PLUS_ONE"
const MINUS_ONE = "MINUS_ONE"
const PLUS_N = "PLUS_N"
const MINUS_N = "MINUS_N"

//action creator : action value를 return 하는 함수
//컴포넌트에서 사용하기 위해 export
export const plusOne = () => {
  return {
    type: PLUS_ONE
  }
}

export const minusOne = () => {
  return {
    type: MINUS_ONE
  }
}

// 매개변수의 payload는 App컴포넌트에서 받아온다
export const plusN = (payload) => {
  return {
    type: PLUS_N,
    payload: payload
  }
}

export const minusN = (payload) => {
  return {
    type: MINUS_N,
    payload: payload
  }
}

// 초기 상태(state)
const initialState = {
  number: 0
}

// action 객체라는 것은 action payload 만큼 처리하는 것이다
// 예) payload가 3이다. 3만큼 plus
const counter = (state = initialState, action) => {
  switch (action.type) {
    case PLUS_ONE:
      return {
        number: state.number + 1
      }
    case MINUS_ONE:
      return {
        number: state.number - 1
      }
    case PLUS_N:
      return {
        number: state.number + action.payload
      }
      case MINUS_N:
      return {
        number: state.number - action.payload
      }
    default:
      return state
  }
}

export default counter

📁 App.jsx

import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { plusN, minusN } from './redux/moduls/counter';

function App() {

  const [number, setNumber] = useState(0)

  const counter = useSelector((state) => {
    return state.counter;
  })

  const dispatch = useDispatch()

  return (
    <>
      <div>현재 카운트 : {counter.number}</div>
      <div>
        <input 
        type="number"
        value={number}
        onChange={(event) => {
          //구조분해할당 사용
          const {value} = event.target
          setNumber(+value)
        }}
         /> 
      </div>
      <button onClick={() => {
        //number에 input에서 받은 값이 들어 있다.
        dispatch(plusN(number))
      }}>+</button>
      <button onClick={() => {
        dispatch(minusN(number))
      }}>-</button>
    </>
  )
}

export default App