1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import { createStore } from "redux";

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 };
};

//addToDo와 deleteToDo는 action을 만드는 용도. object를 return한다. 이 객체들은 reducer에 action인자 값에 들어간다.

const reducer = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      const newToDoObj = { text: action.text, id: Date.now() };
      return [newToDoObj, ...state];
    //중요한 것: state를 push와 같은 매서드로 mutate하지 않을 것. 무조건 새로운 state로 대체해야한다.
    //위는 이전에 있던 array(...state를 뜻함)에 새로운 object를 추가하는 것
    case DELETE_TODO:
      return state.filter((toDo) => toDo !== action.id);
    //state를 수정하는 것이 아니라 조건에 맞지 않는 todo를 제거한 새 배열을 만드는 것이다.
    default:
      return state;
  }
};

const store = createStore(reducer);

store.subscribe(() => console.log(store.getState()));
//subscribe는 변경 사항을 알려주는 store의 method
//getStore는 current state값을 보여주는 store의 method

const paintToDos = () => {
  const toDos = store.getState();
  ul.innerHTML = "";
  toDos.forEach((toDo) => {
    const li = document.createElement("li");
    const btn = document.createElement("button");
    btn.innerText = "DEL";
    btn.addEventListener("click", dispatchDeleteToDo);
    li.id = toDo.id;
    li.innerText = toDo.text;
    ul.appendChild(li);
    li.appendChild(btn);
  });
};

store.subscribe(paintToDos);

const dispatchAddToDo = (text) => {
  store.dispatch(addToDo(text));
};

const dispatchDeleteToDo = (e) => {
  const id = parseInt(e.target.parentNode.id);
  store.dispatch(deleteToDo(id));
};

//dispatchAddToDo와 dispacthDeleteToDo는 action을 dispatch하기 위한 용도의 함수
//store.dispatch()에 들어간 addToDo와 deleteToDo는 객체를 return하기 위해 만들어진 것
//return된 객체들은 store.dispatch(addToDo(text)와 같이 dispatch에 이용된다.

const form = document.querySelector("form");
const input = document.querySelector("input");
const ul = document.querySelector("ul");

const onSubmit = (e) => {
  e.preventDefault();
  const toDo = input.value;
  input.value = "";
  dispatchAddToDo(toDo);
};

form.addEventListener("submit", onSubmit);