iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

用30天更加認識 React.js 這個好朋友系列 第 6

Day6-React Hook 篇-useReducer

這個 hook 可以讓我們用類似 redux 用 reducer、action、dispatch 操作 state。

useReducer 適合較複雜的 state,因為我們可以將狀態的改變統一放在 reducer 去做管理,像 useState 的狀態改變就會分散在不同的函式裡面。

useState 的底層其實是用 useReducer 實踐的

語法

const [state, dispatch] = useReducer(reducer, initialState, initStateFn);

  • useReducer 第一個參數用來設定變更 state 的規則,特定的 action 時如何更新 state
  • useReducer 第二個參數是初始化的 state
  • useReducer 第三個參數是初始化 state 的函式,非必要的參數
  • dispatch 用來觸發 action

因此初始化 state 可以在第二個參數做初始化,或是獨立寫一個會 return 初始化 state 的函式,放到第三個參數。

範例

import React, { useReducer } from "react";

// 初始化 state
const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    case "reset":
      return { count: (state.count = 0) };
    default:
      return { count: state.count };
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      Count: {state.count}
      <br />
      <br />
      <button onClick={() => dispatch({ type: "increment" })}>Increment</button>
      <button onClick={() => dispatch({ type: "decrement" })}>Decrement</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </div>
  );
}

本篇範例程式在以下連結:

範例程式(Codesandbox)


上一篇
Day5-React Hook 篇-認識 useContext
下一篇
Day7-在認識 useMemo 前,先認識 React.memo
系列文
用30天更加認識 React.js 這個好朋友32

尚未有邦友留言

立即登入留言