[노마드코더] 초보자를 위한 리덕스 101 - #1 PURE REDUX: COUNTER

TK·2023년 7월 6일
redux노마드코더
0

[노마드코더] 초보자를 위한 리덕스 101

목록 보기
2/4
post-thumbnail

🔍1.0 Vanilla Counter

💻구현 화면


👩‍💻코드 보기

  • index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>Vanilla Redux</title>
  </head>
  <body>
    <button id="add">Add</button>
    <span></span>
    <button id="minus">Minus</button>
  </body>
</html>
  • index.js
const add = document.getElementById("add");
const minus = document.getElementById("minus");
const number = document.querySelector("span");

let count = 0;
number.innerText = count;

const updateText = () => {
  number.innerText = count;
};

const handleAdd = () => {
  count = count + 1;
  updateText();
};

const handleMinus = () => {
  count = count - 1;
  updateText();
};

add.addEventListener("click", handleAdd);
minus.addEventListener("click", handleMinus);

🔍1.1 Store and Reducer

👩‍💻Redux 설치

npm install redux


👩‍💻이론 배우기

  • createStore : store 생성
  • store : data를 저장하는 장소
    (여기서는 counter를 저장)

참고) 현재는 Redux toolkit을 이용하므로 더이상 사용되지 않는다. 취소선을 무시하고 사용 가능하고 취소선이 안나오도록 하려면 legacy_createStore를 대신 사용할 수 있다. 혹은 npm install redux@4.1.2으로 설치하여 진행하면 된다.

  • createStore는 reducer를 요구한다.


  • reducer : 내 data를 modify하는 함수
    (여기서는 counter에 +1 혹은 -1을 하게 한다)
    - reducer가 무엇을 return하든 그것이 내 data가 된다.

👩‍💻코드 보기

  • index.js
import { legacy_createStore } from "redux"; //react-redux 아님!

const add = document.getElementById("add");
const minus = document.getElementById("minus");
const number = document.querySelector("span");

// reducer: data를 modify하는 함수
const reducer = (state = 0) => {
  // state = 0 : 현재의 state
  // **action을 통해 값 수정 가능**
  return state;
};
// countStore: data를 넣는 장소
const countStore = legacy_createStore(reducer);
// getState: 데이터 값 불러오기
console.log(countStore.getState());

🔍1.2 Actions

👩‍💻이론 배우기

  • action : redux에서 function을 부를 때 쓰는 두 번째 parameter 혹은 argument으로 reducer와 소통하기 위한 방법
  • dispatch : reducer에게 action(=메세지)을 보내는 방법 (객체로 작성)

👩‍💻코드 보기

  • index.js
import { legacy_createStore } from "redux";
//react-redux 아님!

const add = document.getElementById("add");
const minus = document.getElementById("minus");
const number = document.querySelector("span");


// reducer: data를 modify하는 함수
// action: reducer와 소통하기 위한 방법
const reducer = (count = 0, action) => {
  if (action.type === "ADD") {
    return count + 1;
  } else if (action.type === "MINUS") {
    return count - 1;
  } else return count;
};
// countStore: data를 넣는 장소
const countStore = legacy_createStore(reducer);

// dispatch: Reducer에게 Action을 보내는 방법
countStore.dispatch({ type: "ADD" });
countStore.dispatch({ type: "ADD" });
countStore.dispatch({ type: "ADD" });
countStore.dispatch({ type: "ADD" });
countStore.dispatch({ type: "ADD" });
countStore.dispatch({ type: "MINUS" });

console.log(countStore.getState());

🔍1.3 Subscriptions

👩‍💻이론 배우기

  • Subscribe : store 안에 있는 변화 감지
    - store.subscribe(func) : store안의 변화를 감지하면 func 실행

👩‍💻코드 보기

  • index.js
import { legacy_createStore } from "redux";

const add = document.getElementById("add");
const minus = document.getElementById("minus");
const number = document.querySelector("span");

number.innerText = 0;

// reducer: data를 modify하는 함수
// action: reducer와 소통하기 위한 방법
const reducer = (count = 0, action) => {
  if (action.type === "ADD") {
    return count + 1;
  } else if (action.type === "MINUS") {
    return count - 1;
  } else return count;
};
const countStore = legacy_createStore(reducer);

const onChange = () => {
  number.innerText = countStore.getState();
};

// subscribe: store 안에 있는 변화 감지
countStore.subscribe(onChange);

// dispatch: Reducer에게 Action을 보내는 방법
const handleAdd = () => {
  countStore.dispatch({ type: "ADD" });
};
const handleMinus = () => {
  countStore.dispatch({ type: "MINUS" });
};

add.addEventListener("click", handleAdd);
minus.addEventListener("click", handleMinus);

💻구현 화면

(이전과 같이 동작함)


🔍1.4 Recap Refactor

👩‍💻요약 정리

  • reducer : 현재 상태의 application과 함께 불려지는 function (+ with action)
    return하는 것은 application의 state가 됨
  • action : reducer와 소통하는 방법으로 Object여야 하며 그 key 이름은 항상 type임 (바꿀 수 없음)
  • dispatch : reducer에게 action을 보내는 방법
  • subscribe : store의 변화를 감지하면 인자값으로 준 함수를 실행
  • switch문이 자주 쓰임
switch(action.type){
  case ..blah..:
    return smth
  case ..blah2..:
    return smth2
  default:
    return smth3
}
  • string으로 바로 쓰는 대신에 const variable로 선언해서 사용하기 → 에러 발견 용이
    참고 자료 : 노마드코더 강의 tata님의 댓글

👩‍💻코드 보기

import { legacy_createStore } from "redux";

const add = document.getElementById("add");
const minus = document.getElementById("minus");
const number = document.querySelector("span");

number.innerText = 0;

// 개선사항 2 : 오타방지를 위한 변수 선언
const ADD = "ADD";
const MINUS = "MINUS";

// 개선사항 1 : if else문 => switch문으로 변경
const reducer = (count = 0, action) => {
  switch (action.type) {
    case ADD:
      return count + 1;
    case MINUS:
      return count - 1;
    default:
      return count;
  }
};

// ...이하 생략

출처 : 노마드코더 - 초보자를 위한 리덕스 101

profile
TK
쉬운게 좋은 FE개발자😺
이전 포스트

[노마드코더] 초보자를 위한 리덕스 101 - #0 INTRODUCTION

다음 포스트

[노마드코더] 초보자를 위한 리덕스 101 - #2 PURE REDUX: TO DO LIST

0개의 댓글

관련 채용 정보