[⚛️] Redux - counter 앱 완성, redux 사이클, dispatch

💭

configStore.js에서 store를 생성하고,

main.jsx에 store를 주입하고,

module을 만들며 reducer 함수를 생성했다.

 

이렇게 만든 reducer에게 어떻게 명령을 전달할 지,

reducer는 받은 명령을 어떻게 처리할 지에 집중하여 다음 단계를 생각해봐야 한다.

---

 

counter 앱의 세팅으로 조회 기능까지 완료.

https://coco910.tistory.com/75

[⚛️] redux - 소개 및 설정 + counter 앱 세팅

 

나머지를 완성하기 위해서는 store에 있는 값을 수정하는 기능이 필요하다.

이를 위해 redux의 사이클에 대해 정리해보겠다.

 

 

redux의 사이클

 

 

 

1. View에서 사용자의 액션이 일어남.(클릭 등)
2. dispatch에서 action이 일어남.
3. action에 의해서 reducer 함수가 실행됨.
4. reducer의 실행결과에 따라 store에 새로운 값이 저장됨.
5. 변경 사항이 View(UI)에 반영됨.

 

reducer 함수는 module의 동작에 따라 store에 새로운 state를 생성한다.

따라서 reducer가 실행할 명령(action 객체)을 만들고 보내면, reducer는 그 명령을 처리한다.

(우리가 할 일)

counter 앱 로직 구현

 

크게 세 단계로 나눌 수 있다.

1. reducer에게 명령을 보낼 준비
   1-1. App.jsx 에서 버튼 만들기
   1-2. dispatch 만들기
   1-3. 버튼에 onClick
2. reducer 함수에서 명령 받기
   2-1. 전달받은 action 객체 확인
   2-2. switch문 작성
   2-3. useSelector로 확인
3. action 객체, dispatch, reducer 정리

 

 

 

 

1. reducer에게 명령을 보낼 준비

 

📍1-1. 명령 만들기(App.jsx 에서 버튼 만들기)

사용자는 버튼을 클릭(액션)하거나 number에 +1을 하라고 명령을 보낸다.

리덕스에서는 그 명령을 Action 이라고 한다.

이 행동을 코드로 만들면 객체이다.

그래서 편의상 액션 객체라고 불리운다.

 

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

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

{ type : "PLUS_ONE" };

모듈에 있는 state을 변경하기 위해서는 그에 해당하는 액션 객체를 모두 만들어줘야 한다.

 

 

 

📍1-2. dispatch 만들기

이렇게 만들어진 액션 객체를 reducer에게 보내야 한다.

그러기 위해선 useDispatch 라는 훅을 사용한다.

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

useDispatch를 dispatch 라는 변수에 담아준다.

이때 dispatch는 함수이며 반드시 dispatch() 로 실행한다.

 dispatch가 실행될 때 View(컴포넌트)에서 store의 값을 변경한다.

 

📍 1-3. 버튼에 onClick

dispatch를 사용할 때 ( ) 안에 액션객체를 넣어주면 된다.

버튼을 예시로 살펴보자면

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

onClick 이벤트 함수 내에 dispatch를 실행한다.

 

 

 

2. reducer 함수에서 명령 받기

 

📍2-1. 전달받은 action 객체 확인

dispatch를 통해 reducer로 보낸 action 객체를 확인해보겠다.

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

리듀서 내부 console.log를 통해 확인이 가능하다.

 

 

📍2-2. switch문 작성(state 값을 변경하는 코드 구현)

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

switch문 정리글

 

 

 

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

 

 

위의 코드를 해석하자면,

1. action이 {type: “PLUS_ONE”}
2.  리듀서 안에 있는 스위치문은 action.type을 조회
3. 일치하면 return 문이 실행
4. 새로운 state 반환

 

📍2-3. useSelector로 확인

• App.js에서 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;

 

 

 

 

3. action 객체, dispatch, reducer 정리

 

📍action 객체

• 반드시 type이라는 key를 갖는 객체.
• reducer로 보낼 명령

📍dispatch

• action 객체를 reducer로 보낼 전달자 함수
• store의 내장 함수 중 하나
• action을 발생시키는 것
• action을 파라미터로 전달 (dispatch(action) : action의 type은 대문자로 작성)

📍reducer

• 전달받은 action을 (switch문을 통해) 검사
• 조건이 일치했을 때 새로운 state를 생성하는 함수