Redux part-2 액션객체/ dispatch

카운터 모듈의 state 수정 기능 만들기 (+1 기능 구현하기)

 

counter 모듈의 state 값을 변경하려면?

 

우리가 Redux를 배우기 전에는 setState를 이용해서 +1를 해주었을 것이다.

Redux를 배우고 나서는 말했듯이 이 setState에 해당하는 것이 모듈의 리듀서 부분에서 일어난다.

 

그 순서를 우선 살펴보자.

1. 리듀서에게 보낼 number를 +1 하라는 "명령"을 만든다.
2. 명령을 보낸다.
3. 리듀서에서 명령을 받아 number +1을 한다.

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

 

위와 같이 리듀서에게 numer에 +1을 하라는 명령을 만들어야 한다.

우리는 이를 액션 객체라고 부른다. ( 이런 상황에 맞는 액션을 취해줘 라고 전달하는 의미)

 

액션 객체는 반드시 type 이라는 key를 가져야 한다. 

 

// 예시 코드
//number에 +1 을 하는 액션 객체

{ type : "PLUS_ONE" };

 

앞으로 우리는 리덕스 모듈에 있는 state를 변경하기 위해서는 그에 해당하는 액션 객체를 모두 만들어 주어야 한다.

 

명령 (액션객체) 보내기 - useDispatch

 

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

useDispatch라는 훅이다.

 

useDispatch 사용법

// 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;

useDispatch라는 훅을 사용하기 위해서는 위와 같이 컴포넌트 안에서 dispatch라는 변수를 생성해줘야 한다.

이렇게 생성한 dispatch는 함수라는 점을 기억하자. 그래서 우리는 dispatch를 사용할 때 ()를 붙여서 함수를 실행한다.

이렇게 디스패치를 이용해서 액션객체를 리듀서로 보낼 수가 있다.

 

액션 객체 받기

 

액션 객체를 받기 위해서 counter 모듈을 다음과 같이 수정하자.

// src/redux/modules/counter.js

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

// 리듀서
const counter = (state = initialState, action) => {
	console.log(action); // 여기에 console.log(action) 추가
  switch (action.type) {
    default:
      return state;
  }
};

// 모듈파일에서는 리듀서를 export default 한다.
export default counter;

 

액션객체 명령대로 리듀서가 state 값을 변경하기

 

state에 있는 number를 실제로 변경하는 로직코드를 구현해보자.

로직 코드는 리듀서 안에 있는 스위치문으로 작성된다.

 

리듀서가 액션 객체를 받아 상태를 바꾸는 원리는 아래와 같다.

1. 컴포넌트로부터 dispatch를 통해 액션객체를 전달 받는다.
2. action 안에 있는 type을 스위치문을 통해 하나씩 검사해서, 일치하는 case를 찾는다.
3. type과 case가 일치하는 경우에, 해당 코드가 실행되고 새로운 state를 반환(return) 한다.
4. 리듀서가 새로운 state를 반환하면, 그게 새로운 모듈의 state가 된다.

// src/modules/counter.js

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

// 리듀서
const counter = (state = initialState, action) => {
  console.log(action);
  switch (action.type) {
		// PLUS_ONE이라는 case를 추가한다.
		// 여기서 말하는 case란, action.type을 의미한다.
		// dispatch로부터 전달받은 action의 type이 "PLUS_ONE" 일 때
		// 아래 return 절이 실행된다. 
    case "PLUS_ONE":
      return {
				// 기존 state에 있던 number에 +1을 더한다.
        number: state.number + 1,
      };

    default:
      return state;
  }
};

// 모듈파일에서는 리듀서를 export default 한다.
export default counter;

 

 useSelector로 변경된 state값 확인하기

 

// 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;

 

화면에서도 콘솔에서도 버튼을 클릭할 때마다 number가 +1씩 증가하는 것을 볼 수 있다.

state가 변경되면 화면이 리렌더링 되듯이 리덕스에 있는 state도 값이 변경되면 useSelector를 

하고있는 컴포넌트들도 모두 리렌더링 된다. 그래서 화면상에서도 값이 달라지는 것.

 

정리

• 액션객체란, 반드시 type이란 key를 가져야 하는 객체이다. 또한 리듀서로 보낼 “명령"이다.
• 디스패치란, 액션객체를 리듀서로 보내는 “전달자” 함수이다.
• 리듀서란, 디스패치를 통해 전달받은 액션객체를 검사하고, 조건이 일치했을 때 새로운 상태값을 만들어내는 “변화를 만들어내는" 함수이다.
• 디스패치(dispatch)를 사용하기위해서는 useDispatch() 라는 훅을 이용해야 한다.
• 액션객체 type의 value는 대문자로 작성한다. (JS에서 상수는 대문자로 작성하는 룰이 있음)