Todo
import { createStore } from "redux";
const form = document.querySelector("form");
const input = document.querySelector("input");
const ul = document.querySelector("ul");
const ADD_TODO = "ADD_TODO";
const DELETE_TODO = "DELETE_TODO"
const addToDo = (text) => {
return {
type: ADD_TODO,
text
}
}
const deleteToDo = (id) => {
return {
type: DELETE_TODO,
id
}
}
const reducer = (state = [], action) => {
console.log(action);
switch (action.type) {
case ADD_TODO:
return [{ text: action.text, id: Date.now() }, ...state];
case DELETE_TODO:
const cleaned = state.filter((toDo) => toDo.id !== action.id); //(DO NOT MUTATE STATE, BUT REPLACE IT. )
return cleaned;
default:
return state;
}
};
const store = createStore(reducer);
store.subscribe(() => console.log(store.getState())) //자료저장소 추가
const dispatchDeleteToDo = (e) => {
const id = parseInt(e.target.parentNode.id); // html에서 가져오는 id가 string일 수 있으므로
store.dispatch(deleteToDo(id))
}
const paintToDos = () => {
const toDos = store.getState();
ul.innerHTML = ""; // 초기화
toDos.forEach(toDo => {
const li = document.createElement("li");
const btn = document.createElement('button');
li.id = toDo.id;
li.innerText = toDo.text;
btn.innerText = 'delete';
btn.addEventListener('click', dispatchDeleteToDo)
ul.appendChild(li);
li.appendChild(btn);
})
}
store.subscribe(paintToDos);
const dispatchAddToDo = (text) => {
store.dispatch(addToDo(text));
}
const onSubmit = e => {
e.preventDefault();
const toDo = input.value;
input.value = "";
dispatchAddToDo(toDo);
};
form.addEventListener("submit", onSubmit);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<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"
/>
<script defer src="./../src/index.js" type="text/jsx"></script>
<title>Vanilla Redux</title>
</head>
<body>
<h1>To Dos</h1>
<form>
<input type="text" placeholder="Write to do" />
<button>Add</button>
</form>
<ul></ul>
</body>
</html>
Counter
import { createStore } from "redux";
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) => { //기본값 지정, action은 reducer에게 말하는것.
switch (action.type) {
case ADD: //switch는 string만 가능함.
return count + 1;
case MINUS:
return count - 1;
default:
return count;
}
} // reducer 는 데이터를 변경시키는 함수function
const countStore = createStore(countModifier);
// console.log(countStore)
const onChange = () => {
number.innerText = countStore.getState();
}
countStore.subscribe(onChange);
// countStore.dispatch({ type: 'add' })
const handleMinus = () => {
countStore.dispatch({ type: 'minus' });
}
add.addEventListener("click", () => { countStore.dispatch({ type: 'add' }) });
minus.addEventListener("click", handleMinus);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<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"
/>
<script defer src="./../src/index.js" type="text/jsx"></script>
<title>Vanilla Redux</title>
</head>
<body>
<button id="add">ADD</button>
<span>0</span>
<button id="minus">MINUS</button>
</body>
</html>