• action type 을 수정하면 해당 action을 사용하는 모듈에서 모두 수정해야한다.
• 휴먼 에러가 발생 할 확률이 높다.
• action type을 변수 형태로 관리하며 실수를 방지한다.

📁 Redux / moduls / counter.js

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

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

// input : state와 action
const counter = (state = initialState, action) => {
  switch (action.type) {
    case PLUS_ONE:
      return {
        //console.log(state) 를 해보면 
        //state가 객체 형태이기 때문에 return state + 1을 하면 undefined가 나온다.
        number: state.number + 1
      }
    case MINUS_ONE:
      return {
        number: state.number - 1
      }
    default:
      return state
  }
}

export default counter

📁 App.jsx

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { PLUS_ONE, MINUS_ONE } from './redux/moduls/counter';

function App() {

  // 여기에서 store에 접근하여, counter의 값을 읽어오고 싶다
  // useSelector
  // 매개변수의 state는 중앙저장소 안에 있는 state 전체를 말한다.
  const counter = useSelector((state) => {
    return state.counter;
  })

  // dispatch를 가져와보자 
  const dispatch = useDispatch()

  return (
    <>
      <div>현재 카운트 : {counter.number}</div>
      <button onClick={() => {
        dispatch({
          //action 객체
          type: PLUS_ONE
        })
      }}>+</button>
      <button onClick={() => {
        dispatch({
          //action 객체
          type: MINUS_ONE
        })
      }}>-</button>
    </>
  )
}

export default App

action creator

• action 객체를 작성 할 일이 많아지기 때문에 함수로 따로 만들어준다

📁 Redux / moduls / counter.js 코드 추가

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

📁 App.jsx 수정

//기존 코드
dispatch({
  //action 객체
  type: MINUS_ONE
})

//수정 된 코드
dispatch({
  //action 객체
  type: MINUS_ONE
})