30DaysChallenge 是自主性每兩天寫一篇技術相關的部落格

React

useReducer

useReducer 是一個可以處理複數 state，且有更複雜的邏輯時的好幫手

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

• state: 就是state，不多說

• initialState: 就是設定初始的值，既然說明複數state，可以使用物件來包一堆囉

• reducerFn(state, action): 改變state的 function，類似於setState但可以自定複雜的邏輯
• dispatchFn: 在元件內呼叫的函式，呼叫後會將參數的內容傳入reducerFn的action裡面
• initFn(optional):若有填寫，初始化時，initialState會以參數的方式先進入initFn，並依照initFn回傳當為初始值

---

舉例

之前有提到說 Hook 一定要在元件內使用，

但 useReducer 的各種函數，可以拉到元件外面，也就是很純正 function，只注重 input/output 的 pure function

// outside元件
// 可以透過dispatch過來的東西來判斷現在要進行什麼處理
// return的東西就會用來更新state
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,
})

//透過監聽事件來dispatch東西過去，可以傳定義好的動作名稱或是資料都可
const validateEmailHandler = () => {
  dispatchEmail({ type: "INPUT_BLUR" })
}

---

WHICH? useState & useReducer

• 當資料獨立且不需加以影響其他資料時 useState

• 當資料多且需要加以判斷影響其他資料(有關聯性) useReducer

• 沒有特別限制，也可以一個資料用 useReducer，但就像殺雞用牛刀

---

短篇 08/24