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 的函式，放到第三个参数。

优点

dispatch 不会随着 rerender 而重新分配记忆体位置，在作为 props 传入到 child component 中时也可以不用担心没有 useMemo 而造成 re-render 的问题

缺点

1. useReducer 无法存取 global store
2. useReducer 没有 middleware，不能像 Redux 能用 thunk 或 saga 来做 data fetching、处理 side effect

范例

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)