React

最近在 Medium 上看到一篇文章說，在處理比較複雜的 state 時，應該使用 useReducer 將 state 變化的邏輯從 component 中抽離出來。想想覺得滿有道理的，以不久前做的 todo-app 為例子，如果我想要更新其中一個 todo 的話，用 useState 我需要在 component 這樣寫：

const checked = e.currentTarget.checked;
const nextTodos = todos.map(todo => {
  if (todo.id === id) return { ...todo, isCompleted: checked };

  return todo;
});
setTodos(nextTodos);

但如果是用 useReducer 的話，我只需要這樣寫：

const checked = e.currentTarget.checked;
dispatch({ type: 'check', payload: { checked, id } });

因為更新 state 的邏輯從 component 中抽離出來，所以在 component 內只需要把 action 傳進 dispatch 就好，是不是簡潔許多？