[Redux] Action Values, Action Creators

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React)

학습주제: React Redux

학습내용: Redux Setting 2. 모듈, 모듈의 구성요소, 스토어와 모듈 연결 확인(useSelector)

학습일: 2024. 6. 4.

---

1. Action Values (액션 벨류)

//액션 value를 상수들로 만들기
const PLUS_ONE = "PLUS_ONE";
const MINUS_ONE = "MINUS_ONE";

 

2. Action Creators (액션 생성자)

// Action Creator를 만들기
export const plusOne = () => {
  return {
    type: PLUS_ONE,
  };
};

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

 

 

3.  action values와 action creators를 활용 - 예시: counter +1, -1

- 리듀서 전체 코드

// src/modules/counter.js

// 추가된 코드 - 액션 value를 상수들로 만들기
const PLUS_ONE = "PLUS_ONE";
const MINUS_ONE = "MINUS_ONE";


// 추가된 코드 - Action Creator 만들기
export const plusOne = () => {
  return {
    type: PLUS_ONE,
  };
};

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


// 초기 상태값
const initialState = {
  number: 0,
};

// 리듀서
const counter = (state = initialState, action) => {
  switch (action.type) {
    case PLUS_ONE: // case에서도 문자열이 아닌, 위에서 선언한 상수를 넣어줍니다. 
      return {
        number: state.number + 1,
      };
    case MINUS_ONE: // case에서도 문자열이 아닌, 위에서 선언한 상수를 넣어줍니다. 
      return {
        number: state.number - 1,
      };
    default:
      return state;
  }
};


export default counter;

 

 

- App 전체 코드

// src/App.js

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

// 사용할 Action creator를 import 합니다.
import { minusOne, plusOne } from "./redux/modules/counter";

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

  return (
    <div>
      {number}
      <button
        onClick={() => {
          dispatch(plusOne()); // 액션객체를 Action creator로 변경합니다.
        }}
      >
        + 1
      </button>
      {/* 빼기 버튼 추가 */}
      <button
        onClick={() => {
          dispatch(minusOne()); // 액션객체를 Action creator로 변경합니다.
        }}
      >
        - 1
      </button>
    </div>
  );
};

export default App;