基本簡介

useReducer：他基本上就是一個進階版的 useState ，同樣都是儲存且更新資料。

useState 長相如下 ⇩
const [state, setState] = useState(initialState);
⇒ useState 可以透過 setState 更新 state

useReducer ⇩
const [state, dispatch] = useReducer(reducer, initialArg, init);
⇒ useReducer 可以用類似 redux 用 reducer、action、dispatch 操作 state。

名詞解釋又來啦～

• state :資料的狀態
• dispatch :接收 action 更新 state
• reducer : 他是一個函式
  (old state, action) => { return "new state" }
• action : 是一個 object 被用於描述 state 更新的方式 ，只能透過 dispatch 調用。
• initialArg : state 的初始值
• init : useReducer 的初始化 function

接下來就來看一下如何使用吧

function init(initialCount) {
// 其實感覺就只是一個普通的function，
  return {count: initialCount};
}
// reducer function
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
	case 'sameReset':
    // 利用 payload 帶入初始值也能達到 init function 相同功能
      return {count: action.payload};
    default:
      throw new Error();
  }
}
// action = {type: 執行的動作, payload: 帶入執行動作的 data }
function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
			<button
        onClick={() => dispatch({type: 'sameReset', payload: initialCount})}>
        Same Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

看到這邊這邊大概能理解 useReducer 了吧，感恩官網讚嘆官網～

本日結語：

傻傻的我本來想把官網上提供 useReducer, useContext 的範例組合起來呈現一下如何使用。

結果一寫下去不得了，我這才發現他們其實都各自都能達到類似 Redux 功能，根本不需要組合起來，真是不打不相識啊。

不過天色漸晚明天再來好好解析他倆的不同吧。疑？好像又讓我混過一天了。