使用 React useReducer Hook

介绍

useReducer Hook 是 React 提供的一个 Hook，它接收一个 reducer 函数和初始 state，返回当前的 state 以及一个 dispatch 方法，可以用来更新 state。它可以用来替代 class 组件中的 state 和 setState 方法，使得代码更加简洁，更容易维护。

语法

useReducer Hook接受两个参数。

useReducer（<reducer>，<initialState>）

reducer 函数包含您的自定义状态逻辑，initialState 可以是一个简单的值，但通常会包含一个对象。

useReducer Hook返回当前状态和 dispatch 方法。

这是一个使用useReducer在计数器应用中的示例：

import { useReducer } from "react";
import ReactDOM from "react-dom/client";

const initialTodos = [
  {
    id: 1,
    title: "Todo 1",
    complete: false,
  },
  {
    id: 2,
    title: "Todo 2",
    complete: false,
  },
];

const reducer = (state, action) => {
  switch (action.type) {
    case "COMPLETE":
      return state.map((todo) => {
        if (todo.id === action.id) {
          return { ...todo, complete: !todo.complete };
        } else {
          return todo;
        }
      });
    default:
      return state;
  }
};

function Todos() {
  const [todos, dispatch] = useReducer(reducer, initialTodos);

  const handleComplete = (todo) => {
    dispatch({ type: "COMPLETE", id: todo.id });
  };

  return (
    <>
      {todos.map((todo) => (
        <div key={todo.id}>
          <label>
            <input
              type="checkbox"
              checked={todo.complete}
              onChange={() => handleComplete(todo)}
            />
            {todo.title}
          </label>
        </div>
      ))}
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Todos />);

这只是一种逻辑来跟踪 todo 完成状态。可以通过添加更多动作，将添加、删除和完成 todo的所有逻辑都包含在一个useReducer Hook中。

useReducer Hook 是在React应用程序中管理状态的一个很好的方法。它比 useState Hook更强大，允许更复杂的状态逻辑。