當今天有更多資料需要使用 useState，且有更複雜的處理邏輯

可以使用 useReducer 通通包起來

const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn)

*若設置了 initFn，initialState 就會作為 argu 傳入 initFn

基本上與 useState 差不多：

• state 取得狀態

• dispatchFn 帶入參數

• reducerFn(state, action)

  • state 前一次的狀態
  • action 取得 dispatchFn帶來的參數(資料)
• initFn(initialState) optional 設定初始狀態之前會先執行

---

Code

// outside元件
const emailReducer = (state, action) => {
  if (action.type === "USER_INPUT") {
    console.log(action)
    return { value: action.val, isValid: action.val.includes("@") }
  }

  if (action.type === "INPUT_BLUR") {
    console.log(state)
    return { value: state.value, isValid: state.value.includes("@") }
  }
  return { value: "", isValid: false }
}

// in元件
const [emailState, dispatchEmail] = useReducer(emailReducer, {
  value: "",
  isValid: null,
})

const validateEmailHandler = () => {
  dispatchEmail({ type: "INPUT_BLUR" })
}

---

useState & useReducer

hook	useState	useReducer
語法	簡單	較複雜
適用	資料簡單	資料結構較多
	與其他資料沒關聯	資料間有互相影響

沒有特定要用哪一種，也可以用 useReducer 處理單一資料，但就如殺雞用牛刀了

---

HOOK 要注意

useState useEffect useReducer

現在會的這三招都是 HOOK

• 只能用在元件裡面，或自定義的 HOOK

• HOOK 要存在於 top level，巢狀也不行

• useEffect 要指對特定會變動的資料，來設定 dependencies