React-hooks-useReducer

useReducer

這是一個額外的Hooks，在某些特殊場景可能會用到。

• 使用方式

// 使用方式
const [state, dispatch] = useReducer(reducer, initialArg, init);
// 官網示例
function init(initialCount) {
  return {count: initialCount};
}

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);
    default:
      throw new Error();
  }
}

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: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}


function App() {
  return (
    <Counter initialCount={0}/>
  )
}

// 傳回參數詳解: useReducer傳回一個數組，包含兩個資料一個是狀态(也就是資料)，另一個則是一個dispatch函數，dispatch調用時要傳入一個對象{type: "操作類型"}來執行不同的操作
// 傳入參數詳解 reducer這裡接收一個純函數，來根據我們調用dispatch時傳入的不同操作類型來執行不同操作，第二個傳參是預設資料，第三個參數init也是一個函數，可以用來将資料固定的格式化，官網示例中這裡是用init來做一個資料初始化操作，将我們建立元件時給入的預設初始資料儲存之後，點選按鈕dispatch執行init操作
// 第三個形參可傳可不傳，如果你不需要将資料進行某種格式化操作的話
           

當我們操作的資料的方式需要多元化時，useState不能滿足我們需求時候，useReducer提供給我們更多的資料的可操作性