Redux 적용

1. Component -> Action

---

• useDispatch를 통해 Action(객체)을 던짐
• Action안에는 반드시 type이라는 키와 payload(선택사항)라는 키가 있어야함
• type : Action의 이름

// App.js
import { useDispatch, useSelector } from "react-redux/es/exports";
import "./App.css";

function App() {
  const dispatch = useDispatch();

  const minus = () => {
    if (count !== 0) {
      dispatch({ type: "MINUS" });
    } else {
      count = 0;
    }
  };
  const plus = () => {
    dispatch({ type: "PLUS" });
  };

2. Action -> Reducer -> Store

---

• reducer는 action 매개변수를 통해 자동으로 dispatch가 던진
  Action을 받아올 수 있다.

// reducer.js

// state 초기화
let initialState = {
  count: 0,
};

function reducer(state = initialState, action) {
  // 받아오는 지 확인 작업
  console.log("액션을 무엇일까? ", action);

• return을 통해 Store에 저장되어있는 값을 바꿈
• reducer는 항상 return을 해줘야함
• ...state(spread 함수)를 한 이유 : state가 여러 개 있을 경우, 기존 객체내용을 복사해 새로운 객체에 전달 가능. 그것을 return해야 store가 바뀐 것을 인식. 헷갈리면 기본적으로 쳐야하는 걸로 알고 있자.

// if문 사용
  if (action.type === "PLUS") {
    return { ...state, count: state.count + 1 };
  } else if (action.type === "MINUS") {
    return { ...state, count: state.count - 1 };
  }
  // Default
  return { ...state };

  // 또는 Switch문 사용
  switch (action.type) {
     case "PLUS":
    	 return { ...state, count: state.count + 1 };
     case "MINUS":
     	 return { ...state, count: state.count - 1};  
     default:
         return { ...state };
     }
}
export default reducer;

3. Store -> Component

---

• useSelector는 state를 매개변수로 받음
• state중에서 count만 가져온다. 그것을 count에 쏙 넣음

import { useDispatch, useSelector } from "react-redux/es/exports";
import "./App.css";

function App() {
  let count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  const minus = () => {
    if (count !== 0) {
      dispatch({ type: "MINUS" });
    } else {
      count = 0;
    }
  };
  const plus = () => {
    dispatch({ type: "PLUS" });
  };

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={minus}>-1</button>
      <button onClick={plus}>+1</button>
    </div>
  );
}

export default App;