counter.js 모듈의 state 수정기능

dispatch

액션객체를 리듀서로 보내기위한 훅은 useDispatch라는 훅 입니다. react-redux에서 import 해서 사용할 수 있으며, 우리가 만든 액션 객체를 리듀서로 보내주는 역할을 하는 훅입니다.

• dispatch를 사용해서 modules에 있는 리듀서로 전달하여 type에 맞게 변경되도록 하는 코드입니다.

  아래의 코드에서 useDispatch()하여 import 해옵니다.
  import한 dispatch를 버튼을 클릭했을때 리듀서로 액션객체를 보내고 싶다면 아래의 코드처럼 작성합니다.

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

  return (
    <div>
      {number}
      <button
        onClick={() => {
          dispatch({ type: "PLUS_ONE" });
        }}
      >
        + 1
      </button>
      <button
        onClick={() => {
          // 액션객체 디스패치
          dispatch({ type: "MINUS_ONE" });
        }}
      >
        - 1
      </button>
    </div>
  );
};

export default App;

modules의 리듀서 코드를 한번 보겠습니다.

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

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) => {
  switch (action.type) {
    case "PLUS_ONE":
      return {
        number: state.number + 1,
      };

    // action.type이 MINUS_ONE 일 때 새로운 state 반환
    case "MINUS_ONE":
      return {
        number: state.number - 1,
      };
    default:
      return state;
  }
};

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

이렇게 코드가 작성이 완료되면 버튼을 누를경우 dispatch로 액션객체가 전달되면서 case에 맞게 리듀서가 실행되면서 state의 변경을 일으킬수있습니다.