JiSoo's Devlog

[Redux] Pure Redux:To Do List 본문

Frontend/Redux

[Redux] Pure Redux:To Do List

지숭숭숭 2024. 6. 24. 21:50

Vanilla JS로 ToDoList 만들기

<body>
  <h1>To Dos</h1>
  <form>
    <input type="text" placeholder="Write to do"/>
    <button>Add</button>
  </form>
  <ul></ul>
</body>
const form = document.querySelector("form");
const input = document.querySelector("input");
const ul = document.querySelector("ul");

const createToDo = (toDo) => {
  const li = document.createElement("li");
  li.innerText = toDo;
  ul.appendChild(li);
};

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

form.addEventListener("submit", onSubmit);

 

위의 코드에서는 UI를 바꾸고 있긴 하지만 사실 데이터가 없다

 

↓ ↓ ↓ ↓

const ADD_TODO = "ADD_TODO";
const DELETE_TODO = "DELETE_TODO";

const reducer = (state = [], action) => {
  console.log(state, action);
  switch (action.type) {
    case ADD_TODO:
      return [];
    case DELETE_TODO:
      return [];
    default:
      return state;
  }
};

const store = createStore(reducer);

const onSubmit = (e) => {
  e.preventDefault();
  const toDo = input.value;
  input.value = "";
  store.dispatch({ type: ADD_TODO, text: toDo });
};

 

 

 

MUTATE STATE를 절대 쓰지 마라 !!

 

★ state는 single source of truth이며, read-only이다

★  store을 수정할 수 있는 유일한 방법은 action을 보내는 방법뿐

★  state를 mutate 하지 말아야 한다

 

mutation은 변형하는 것

> const friends = ["dal"]
< undefined
> friends.push("lynn")
< 2
> friends
< (2) ["dal", "lynn"]

 

mutate 하는 게 아니라 새로운 objects를 리턴해야 한다

새로운 state를 리턴하는 것!

 case ADD_TODO:
  return [{ text: action.text, id: Date.now() }, ...state];

새로운 투두가 들어왔을 때 push로 추가하는 게 아니라 새로운 배열을 리턴하는 것

새로운 state를 create 하고 그 새로운 state를 return

...state는 state 배열 안의 모든 contents

 

 

filter() 메서드는 새로운 array를 만든다

filter()는 테스트를 통과한 모든 element들로 새로운 array를 만든다

case DELETE_TODO:
  return state.filter((toDos) => toDos.id !== parseInt(action.id));

 

 

 

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

↑ 이 함수는 오로지 action을 dispatch 하기 위한 용도

 

const addToDo = (text) => {
  return {
    type: ADD_TODO,
    text,
  };
};

↑ 이게 action creator로 objects를 return 하는 함수

 

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;
    li.appendChild(btn);
    ul.appendChild(li);
  });
};

store.subscribe(paintToDos);

↑repaint 하는 방식은 새로운 todo가 생기면 list 전체를 비우고 state에 있는 toDo들을 이용해 다시 새로운 list를 만든다

 

 

 

Redux는 그저 function !

728x90

'Frontend > Redux' 카테고리의 다른 글

[Redux] Redux Toolkit  (0) 2024.07.05
[Redux] React Redux  (0) 2024.06.25
[Redux] Introduction & Pure Redux:Counter  (0) 2024.06.24
'Frontend/Redux' Related Articles more