Store
앱의 전체 상태 트리를 가지고 있는 스토어입니다. 이 안의 상태를 바꾸는 유일한 방법은 여기에 액션을 보내는 것 뿐입니다.
스토어는 클래스가 아닙니다. 단지 안에 몇가지 메서드가 들어있는 객체일 뿐입니다. 생성하기 위해서는 루트 리듀싱 함수를 createStore에 전달하면 됩니다.
Store 메서드
getState()
dispatch(actiom)
subscribe(listener)
replaceReducer(nextReducer)
Vanila Js - Redux로 간단한 TodoList 만들기
index.js
import { createStore } from "redux";
const form = document.querySelector("form");
const input = document.querySelector("input");
const ul = document.querySelector("ul");
const ADD_TODO = "ADD";
const DELETE_TODO = "DELETE_TODO";
const reducer = (state = [], action) => {
console.log(action);
switch (action.type) {
case ADD_TODO:
return [...state, { text: action.text, id: Date.now() }];
case DELETE_TODO:
return [];
default:
return state;
}
};
const store = createStore(reducer);
store.subscribe(() => console.log(store.getState()));
const paintToDos = () => {
const toDos = store.getState();
toDos.forEach((toDo) => {
const li = document.createElement("li");
li.id = toDo.id;
li.innerText = toDo.text;
ul.appendChild(li);
});
};
store.subscribe(paintToDos);
const addToDo = (text) => {
store.dispatch({ type: ADD_TODO, text });
};
const onSubmit = (e) => {
e.preventDefault();
const toDo = input.value;
input.value = "";
addToDo(toDo);
};
form.addEventListener("submit", onSubmit);
// import { createStore } from "redux";
// const add = document.getElementById("add");
// const minus = document.getElementById("minus");
// const number = document.querySelector("span");
// number.innerText = 0;
// 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 countModifier = (count = 0, action) => {
// // if (action.type === ADD) {
// // return count + 1;
// // } else if (action.type === MINUS) {
// // return count - 1;
// // } else {
// // return count;
// // }
// // };
// const countStore = createStore(countModifier);
// const onChange = () => {
// number.innerText = countStore.getState();
// };
// countStore.subscribe(onChange);
// const handleAdd = () => {
// countStore.dispatch({ type: ADD });
// };
// const handleMinus = () => {
// countStore.dispatch({ type: MINUS });
// };
// add.addEventListener("click", handleAdd);
// minus.addEventListener("click", handleMinus);
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>Vanila Redux</title>
</head>
<body>
<h1>To Dos</h1>
<form>
<input type="text" placeholder="오늘 할일" />
<button>Add</button>
</form>
<ul></ul>
</body>
</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>Vanila Redux</title>
</head>
<body>
<button id="add">Add</button>
<button id="minus">Minus</button>
<span></span>
</body>
</html> -->
이런식으로 나타나게 된다
'🌼 TIL' 카테고리의 다른 글
| 🌞 2/7 내배캠 React 71일차 (0) | 2023.02.08 |
|---|---|
| 🌞 2/6 내배캠 React 70일차 [최종 프로젝트] (0) | 2023.02.06 |
| 🌞 2/2 내배캠 React 68일차 [React - Redux] (0) | 2023.02.02 |
| 🌞 2/1 내배캠 React 67일차 [Next.js] (0) | 2023.02.01 |
| 🌞 1/31 내배캠 React 66일차 [Throttling & Debouncing] (0) | 2023.02.01 |
