Yu Xuan's Blog

最近在 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 就好，是不是簡潔許多？

如果想要 Next.js 在 server 端就產出網頁內容，並且又想使用 dynamic routes 的話，除了使用 getStaticProps 之外，還必須搭配 getStaticPaths，如此一來 Next.js 才會預先在 server 端就把畫面渲染出來。

那麼，在什麼樣的情況下會需要使用 getStaticPaths 呢？部落格就是一個很好的例子，我們將文章寫好後，透過 getStaticPaths 產生出所有文章的 paths，接著在 getStaticProps 就可以根據 path 去 render 不同的頁面。Next.js也有列出一些應該使用 getStaticPaths 的情況，有興趣的讀者可以點擊連結去看看。

本篇文章不會介紹什麼是 Next.js，而會著重在如何使用 getStaticPaths，所以如果讀者不知道什麼是 Next.js 的話，推薦先去 Next.js 的 Learn Course 學習。

各位讀者好，我是 Xuan，一名新手前端工程師。這是本站的第一篇文章，我將會在本文中向各位簡單介紹我自己。