React_useDispatch, useSelector

 

 

📌 리덕스의 흐름

 

 

 

UI : 컴포넌트 (App.jsx)

 

• UI에서 어떤 이벤트가 일어난다. (예를 들어 클릭 이벤트)
• 중앙 데이터 관리소(Store)에 있는 State 값을 바꿔야 한다 라는 요청이 들어온다.
• Dispatch가 요청을 수행해준다. action 객체를 가지고 store에 방문한다.
• 중앙 데이터 관리소에 action을 요청하는, action을 던져주는 놈이 Dispatch다.
• action은 type과 payload를 가지는 객체이다.
• store는 action객체에 있는 type에 따라 state를 변경해주는 작업을 한다.

 

 

 

 

 

📌 리듀서에게 보낼 명령 만들기

 

리듀서에서 내가 어떤 Action을 하길 원한다 라고 표현한다. 행동을 코드로 나타내면 객체로 만든다. = 액션 객체

 

액션 객체는 반드시 Type이라는 key를 가진다. ✏️

액션 객체를 리듀서에게 보냈을 때 리듀서는 객체 안에서 type이라는 key를 보기 때문이다.

 

 

 

 

📌 명령(액션 객체) 보내기

 

액션객체를 리듀서로 보내기 위해서 useDispatch라는 훅을 사용한다.

react-redux에서 import해서 사용할 수 있으며, 액션 객체를 리듀서로 보내주는 역할을 하는 훅이다.

 

// src/App.js


import React from "react";
import { useDispatch } from "react-redux"; // import 해주세요.

const App = () => {
  const dispatch = useDispatch(); // dispatch 생성
  return (
    <div>
      <button>+ 1</button> {/* 버튼을 하나 추가해주세요. */}
    </div>
  );
};

export default App;

 

버튼을 클릭했을 때 +1 이 되는 액션객체를 보내고 싶다면

 

// src/App.js

import React from "react";
import { useDispatch } from "react-redux"; // import 해주세요.

const App = () => {
  const dispatch = useDispatch(); // dispatch 생성
  return (
    <div>
      <button
		// 이벤트 핸들러 추가
        onClick={() => {
		// 마우스를 클릭했을 때 dispatch가 실행되고, ()안에 있는 액션객체가 리듀서로 전달된다.
          dispatch({ type: "PLUS_ONE" }); 
        }}
      >
		+ 1
      </button>
    </div>
  );
};

export default App;

 

 

📌 useSelector로 변경된 stater값 확인하기

 

// src/App.js

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

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

	// 👇 코드 추가
  const number = useSelector((state) => state.counter.number); 

  console.log(number); // 콘솔 추가
  return (
    <div>
	{/* 👇 코드 추가 */}
      {number}
      <button
        onClick={() => {
          dispatch({ type: "PLUS_ONE" });
        }}
      >
        + 1
      </button>
    </div>
  );
};

export default App;

 

 

 

📌 정리

 

• 액션객체란, 반드시 type이란 key를 가져야 하는 객체이다. 또한 리듀서로 보낼 “명령"이다.
• 디스패치란, 액션객체를 리듀서로 보내는 “전달자” 함수이다.
• 리듀서란, 디스패치를 통해 전달받은 액션객체를 검사하고, 조건이 일치했을 때 새로운 상태값을 만들어내는 “변화를 만들어내는" 함수이다.
• 디스패치(dispatch)를 사용하기위해서는 useDispatch() 라는 훅을 이용해야 한다.
  • 디스패치는 스토어의 내장함수 중 하나입니다.
  • 우선, 디스패치는 액션을 발생 시키는 것 정도로 이해하시면 됩니다.
  • dispatch 라는 함수에는 액션을 파라미터로 전달합니다.. dispatch(action) 이런식으로 말이죠.
• 액션객체 type의 value는 대문자로 작성한다. (JS에서 상수는 대문자로 작성하는 룰이 있음)