반응형
<!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 }));
반응형
'Frontend > Javascript' 카테고리의 다른 글
| 비밀번호 검사 (0) | 2020.05.19 |
|---|---|
| new Date or timestamp -> "YYYY-MM-DD HH:ii:ss" 만들기 (0) | 2020.05.10 |
| Javascript Key Trigger Event (0) | 2020.04.24 |
| IE 팝업 액세스 거부 (0) | 2020.02.20 |
| 팝업 부모창 새로고침 (0) | 2020.02.06 |
