[React] Redux로 state값 변경법

🔥 Redux로 state값을 수정하는 방법

우리가 redux를 사용하는 이유는 부모컴포넌트에서 자식컴포넌트로 prop를 내려주는 방식으로 state값을 수정하는 것에 대한 불편함이 있어 사용을 하니까, state를 redux로 수정하는 방법에 대해 알아야 한다.

counter를 예시를 들어서 store 값을 변경하는 방법을 알아보려 한다.

// App.jsx
import React from "react";
import { useDispatch, useSelector } from "react-redux"; // import

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

const App = () => {
  const dispatch = useDispatch(); // dispatch 생성

  const number = useSelector((state) => state.counter.number); // number값 추출
  console.log(number);

  return (
    <div>
      {number}
      <button
        onClick={() => {
          // 클릭 시 dispatch 실행되고, ()안에 있는 액션객체가 리듀서로 전달
          dispatch({ type: "PLUS_ONE" });
        }}
      >
        + 1
      </button>
      <button
        onClick={() => {
          // 클릭 시 dispatch 실행되고, ()안에 있는 액션객체가 리듀서로 전달
          dispatch({ type: "MINUS_ONE" });
        }}
      >
        - 1
      </button>
    </div>
  );
};

export default App;

// counter.js

// 초기 상태값
// const [number, setNumber] = useState(0) < 0에 해당하는 부분과 같은 이치
const initialState = {
  number: 0,
};

// 리듀서 : 변화를 일으키는 함수
// const onClickHandler = () => { setNumber(number+1)}
//
const counter = (state = initialState, action) => {
  console.log(action); // action은 dispatch로 보낸 액션객체임
  switch (action.type) {
    // PLUS_ONE이라는 case추가 case는 action.type을 의미함
    // dispatch로부터 전달받은 action의 type이 PLUS_ONE일때 리턴문 실행
    case "PLUS_ONE":
      return {
        number: state.number + 1,
      };
    case "MINUS_ONE":
      return {
        number: state.number - 1,
      };
    default:
      return state;
  }
};

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

위의 코드처럼 작성하면 state값을 변경해주는 작업을 한 것이다.

정리!

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