TODO LIST
- 바닐라 리덕스로 간단 투두리스트 만들기
- 리액트로 간단 투두리스트 만들기
- 리덕스 공부하는중.. 백신때문인가.. 집중안된다.. 낼 운동해야겠다.
- 낼 모레부터 본격 프로젝트인데 두렵다
//* state mutation(변형)금지(push같은거 사용금지), 새로운 state(object)를 리턴하자
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) // {type: 'ADD_TODO', text: 'hi'}
switch (action.type) {
case ADD_TODO:
const newToDoObj = { text: action.text ,id: Date.now()}
return [...state, newToDoObj] //** state.push(action.text)이걸 하지 않을것이다. 새로운 array를 만들것임
//* 그리고 array는 과거의 state와 새로운 TODO를 갖고 있게될거다.
case DELETE_TODO:
const cleaned = state.filter(toDo => toDo.id !== action.id);
return cleaned;
default:
return []
}
}
const store = createStore(reducer)
store.subscribe(() => console.log(store.getState()))
const onSubmit = (e) => {
e.preventDefault()
const toDo = input.value
input.value = ""
// 이부분 함수로 따로 빼서 정리하자store.dispatch({type: ADD_TODO, text: toDo, id: Date.now()})
dispatchAddToDo(toDo)
}
const dispatchAddToDo = (text) => {
//store.dispatch({type: ADD_TODO, text})
store.dispatch(addToDo(text))
}
const dispatchDeleteToDo = (e) => {
console.log(e.target.parentNode.id)
const id = parseInt(e.target.parentNode.id) //* parseInt를 하는 이유: html에서 id는 string이기 때문에 정수로 바꿔주어야한다.
//store.dispatch({type: DELETE_TODO, id: e.target.parentNode.id})
store.dispatch(deleteToDo(id))
}
const paintToDos = () => {
const toDos = store.getState()
console.log(toDos,"+++++++++")
ul.innerHTML = ''
toDos.forEach(toDo => {
const li = document.createElement('li')
const button = document.createElement('button')
button.addEventListener("click", dispatchDeleteToDo)
li.id = toDo.id
li.innerText = toDo.text
ul.appendChild(li)
li.appendChild(button)
button.innerText = "삭제"
})
}
store.subscribe(paintToDos)
form.addEventListener("submit", onSubmit)
