Redux state 수정

리덕스에서는 리듀서에서  state 값을 수정한다. 

 

리듀서 사용법

1.리듀서에게 보낼 명령을 만든다.

2.명령을 보낸다.

3.리듀서가 명령을 받아 이행한다. 

 

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

리덕스에서 명령을 보낼때는  Action을 사용한다. 

즉 리듀서에게 내가 어떤 Action을 하길 원한다 라고 표현하는 것이다.

이러한 행동을 코드로 표현하기 위해서 객체로 만든다. 그래서 이것을 액션객체 라고 한다. 

 

액션객체는 반드시 type이라는 key를 가져야 한다. 왜냐면 액션객체를 리듀서에게 보냈을때

리듀서는 객체안에서  type이라는 key를 찾아서 이행하기 때문이다. 

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

{ type : "PLUS_ONE" };

//리덕스 모듈에 있는 statte를 변경하기 위해서는 그에 해당하는 액션 객체를 모두 만들어야한다.

액션객체를 보내기 위해선 useDispatch라는 훅을 사용해야한다. 

react-redux에서 import 해서 사용한다.

 

useDispatch 사용법

1.컴포넌트 안에서 dispatch라는 함수를 생성

2. dispatch 에 useDispatch() 입력

3. 선언된 dispatch 에 액션객체 입력

// src/App.js

import React from "react";
import { useDispatch } from "react-redux"; // useDispatch 를 import 

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

 4. 리듀서에서 액션객체를 받았을때 실행할 코드를 구성한다.

// src/modules/counter.js

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

// 리듀서
const counter = (state = initialState, action) => {
  console.log(action);
  switch (action.type) {
    case "PLUS_ONE":
      return {
				// 기존 state에 있던 number에 +1을 더한다.
        number: state.number + 1,
      };

    default:
      return state;
  }
};

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

PLUS_ONE이라는 case를 추가한다.
여기서 말하는 case란, action.type을 의미한다.
dispatch로부터 전달받은 action의 type이 "PLUS_ONE" 일 때
아래 return 절이 실행된다.