⭐任務說明

😸 學習使用 useReducer

useReducer 是什麼

• 用於管理元件中的狀態，可以處理複雜狀態邏輯

如何使用

import { useReducer } from 'react';

function reducer(state, action) {
  // ...
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });
  // ...
  

練習看看

• 做一個點選功能鍵後會把畫面上的數值 + 1

• 我們先以 useReducer 建立狀態，並且預設狀態是 num:15

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { num: 15 });
  return (
  ...
}

• 再來我們的畫面上會有一個 +1 的功能鍵，以及顯示當前狀態的欄位
• 在使用者點選功能鍵時，呼叫 dispatch ，並且傳入資料

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { num: 15 });
  return (
    <>
      <h1>React 大秘境 DAY 16</h1>
      <button
        onClick={() => {
          dispatch({ type: "addNum" });
        }}
      >
        點我 +1
      </button>
      <p>團購 + {state.num} .</p>
    </>
  );
}

• 在呼叫 dispatch ，就是執行 reducer
• 這邊會傳入當前的 state 和 type

function reducer(state, action) {
  // console.log(action);
  if (action.type === "addNum") {
    return {
      num: state.num + 1
    };
  }
  throw Error("不存在");
}

• 看看結果
  ![img][https://i.imgur.com/Wc5tFbB.gif)

• 完整程式碼

結語

😸 透過 useReducer 可以讓狀態有比較複雜的變化，我們下個任務見！