<!DOCTYPE html>
<html>
<head>
<title>Vanilla Redux</title>
</head>
<body>
<button id="add">Add</button>
<span>0</span>
<button id="minus">Minus</button>
</body>
</html>
// 리덕스 import
import { createStore } from "redux";
// Element 획득
const add = document.getElementById("add");
const minus = document.getElementById("minus");
const number = document.querySelector("span");
// 액션값 정의
// -> 미리 정의하는 이유는 오타방지
const ADD = "ADD";
const MINUS = "MINUS";
// 리덕스 함수 정의
const countModifier = (count = 0, action) => {
switch (action.type) {
case ADD:
return count + 1;
case MINUS:
return count - 1;
default:
return count;
}
};
// 저장소 생성
const countStore = createStore(countModifier);
const onChange = () => {
number.innerText = countStore.getState();
};
// state 감지
countStore.subscribe(onChange);
// 액션
add.addEventListener("click", () => countStore.dispatch({ type: ADD }));
minus.addEventListener("click", () => countStore.dispatch({ type: MINUS }));
