3. 리액트없이 리덕스 사용하기(vanilla JS)

Project Setup 리덕스 설치하기 실행하기 리덕스 없이 구현해보기 리덕스로 구현해보기

리덕스를 이해하기 위해서 바닐라 자바스크립트에서 구현해봅시다

Project Setup

편의를 위해서 Create-react-app에서 코드를 작성합니다. 필요없는 파일들은 삭제해줍니다.


npx create-react-app vanilla-redux .

리덕스 설치하기


npm i redux

실행하기


npm start

리덕스 없이 구현해보기


<!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>React App</title>
  </head>
  <body>
    <!-- <div id="root"></div> -->

    <h1>Product Detail</h1>
    <h2>딥러닝 개발자 무릎 담요</h2>
    <span><strong>17,500</strong>원</span>
    <div id="counter-box">
      <button type="button" id="minus" disabled>MINUS</button>
      <span id="number">0</span>
      <button id="plus">PLUS</button>
    </div>
    <div>총 수량 <strong id="quantity">0</strong></div>
    <div><strong id="total">0</strong>원</div>
    <script src="../src/index.js"></script>
  </body>
</html>

public / index.html


const plus = document.getElementById("plus");
const minus = document.getElementById("minus");
const number = document.getElementById("number");
const quantity = document.getElementById("quantity");
const totalPrice = document.getElementById("total");

const PRICE = 17500;

let count = 0;

// UI Update - text
const updateResult = (c) => {
  number.innerText = count;
  quantity.innerHTML = c;
  totalPrice.innerHTML = c * PRICE;
};

// State Change
const addNumber = () => {
  count += 1;
  minus.disabled = false;
  updateResult(count);
};

// State Change
const substractNumber = () => {
  count -= 1;
  plus.disabled = false;
  updateResult(count);
};

// Init
number.innerHTML = count;
updateResult(count);


// Event
plus.addEventListener("click", addNumber);
minus.addEventListener("click", substractNumber);

src / index.js

Count를 Vanila JS로 구현해본다면 Click Event가 발생할 때마다 count의 상태값을 직접 수정한 후, HTML을 업데이트 해줍니다.

리덕스로 구현해보기

위에서 구현한 기능을 리덕스를 사용해서 구현해봅시다!

createStore를 사용하여 store를 생성합니다.


import { createStore } from "redux";

const plus = document.getElementById("plus");
const minus = document.getElementById("minus");
const number = document.getElementById("number");
const quantity = document.getElementById("quantity");
const totalPrice = document.getElementById("total");

const PRICE = 17500;

// Reducer
const countReducer = (state = 1, action) => {
  switch (action.type) {
    case "ADD":
      return state + 1;
    case "SUBSTRACT":
      return state - 1;
    default:
      return state;
  }
};

// create Store
const store = createStore(countReducer);

store의 상태값을 수정할 reducer 함수를 만들어줍니다.


import { createStore } from "redux";

const plus = document.getElementById("plus");
const minus = document.getElementById("minus");
const number = document.getElementById("number");
const quantity = document.getElementById("quantity");
const totalPrice = document.getElementById("total");

const PRICE = 17500;


// Reducer
const countReducer = (state = 0, action) => { // state 초기화
  switch (action.type) {  // switch문
    case "ADD":
      return state + 1;
    case "SUBSTRACT":
      return state - 1;
    default:
      return state;
  }

	//   if (action.type === "ADD") { // if - else문
	//     return state + 1;
	//   } else if (action.type === "SUBSTRACT") {
	//     return state - 1;
	//   } else {
	//     return state;
	//   } 
};

// create Store
const store = createStore(countReducer);

⇒ 함수 reducer에서 if - else문을 사용해도 되지만 switch문을 더 많이 사용합니다.(코드가 직관적)

dispatch를 사용하여 reducer에게 action을 넘겨줄 함수들을 만듭니다.


import { createStore } from "redux";

const plus = document.getElementById("plus");
const minus = document.getElementById("minus");
const number = document.getElementById("number");
const quantity = document.getElementById("quantity");
const totalPrice = document.getElementById("total");

const PRICE = 17500;

// Action
const addNumber = () => {
  store.dispatch({ type: "ADD" });
};

//Action
const substractNumber = () => {
  store.dispatch({ type: "SUBSTRACT" });
};

// Reducer
const countReducer = (state = 1, action) => {
  switch (action.type) {
    case "ADD":
      return state + 1;
    case "SUBSTRACT":
      return state - 1;
    default:
      return state;
  }
};

// create Store
const store = createStore(countReducer);

// Event
plus.addEventListener("click", addNumber);
minus.addEventListener("click", substractNumber);

subscribe를 사용하여 state의 변화가 감지될 때마다 UI를 업데이트 시켜줄 함수를 만듭니다.


import { createStore } from "redux";

const plus = document.getElementById("plus");
const minus = document.getElementById("minus");
const number = document.getElementById("number");
const quantity = document.getElementById("quantity");
const totalPrice = document.getElementById("total");

const PRICE = 17500;

// Action
const addNumber = () => {
  store.dispatch({ type: "ADD" });
};

//Action
const substractNumber = () => {
  store.dispatch({ type: "SUBSTRACT" });
};

// Reducer
const countReducer = (state = 1, action) => {
  switch (action.type) {
    case "ADD":
      return state + 1;
    case "SUBSTRACT":
      return state - 1;
    default:
      return state;
  }
};

// create Store
const store = createStore(countReducer);


const handleWrite = () => {
  number.innerText = store.getState();
  quantity.innerText = store.getState();
  totalPrice.innerText = store.getState() * PRICE;
  console.log(store.getState());
};

// Update UI
store.subscribe(handleWrite);

// Event
plus.addEventListener("click", addNumber);
minus.addEventListener("click", substractNumber);

src / index.js