useReducer实例

下面是一个使用 useReducer 的示例：
 

import React, { useReducer } from "react";

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

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

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

export default Example;

在这个示例中，我们定义了一个名为 reducer 的函数，它根据 dispatch 函数接收的操作类型来更新 state 对象。然后，我们使用 useReducer 钩子，将 reducer 函数和初始状态对象传递给该钩子。该钩子将返回一个tuple：第一个元素是当前状态对象，第二个元素是派遣操作的 dispatch 函数。

接下来，在页面上展示计数器和两个按钮，并将 dispatch 函数作为按钮的点击事件处理程序。每次点击按钮时，dispatch 函数都会根据其操作类型来更新 state 对象。由于我们使用了 useReducer，所以可以方便地管理复杂的状态逻辑，从而提高代码的可读性和可维护性。

总之，useReducer 可以帮助我们在函数组件中添加复杂的状态逻辑，从而避免了使用多个 useState 钩子来管理状态。同时，使用 useReducer 还可以帮助我们在应用程序中保持一致的状态更新方式，并支持撤消/重做等功能。