【DAY 29】useReducer 處理複雜邏輯的 state

看到 useReducer 你可能會疑惑，這跟前幾天講的 Redux 裡的 Reducer 有什麼毛線關係嗎？

的確！useReducer 的觀念跟用法都跟 Redux 很像，所以如果你已經會 Redux，那 useReducer 你也已經會了！

認識 useReducer

useReducer 是 React 的 hook，讓我們可以用 reducer、action、dispatch 來操作 state，在先前我們已經使用過 useState 來操作 state，useState 的底層其實就是用 useReducer 實踐的，而 useReducer 可以說是用來處理複雜邏輯的 state

useReducer 使用方法

• 從 react 中載入 useReducer
• 宣告state、dispatch、reducer 與初始值
  
  

1. 從 react 中載入 useReducer

import { useReducer } from "react";

2. 宣告 state、dispatch、reducer 與初始值

const [state, dispatch] = useReducer(reducer, initialArg, init);

• state：狀態
• dispatch：呼叫 action 的方法
• reducer：對 state 做操作
• initialArg：初始值
• init：初始化 state 的函式，非必要的參數

以下是一個使用 useReducer 的範例

範例: 計數器

import { useReducer } from "react";

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h1>Count: {state.count}</h1>

      <button onClick={() => dispatch({ type: "decrement" })}>
        decrement
      </button>

      <button onClick={() => dispatch({ type: "increment" })}>
        increment
      </button>
    </div>
  );
}

點擊 decrement 減少 count，點擊 increment 增加 count

結語

雖然 useReducer 跟 Redux 很像，但是無法完全取代 Redux，useReducer 無法存取 global store，必須搭配 context API 才能做出類似簡易版 Redux 的效果，適合在較輕量的專案

Reference

React useReducer

---

本文為 IT 鐵人賽系列文 你 React 了嗎? 30 天解鎖 React 技能

---

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。