以不足 20 行代码替代 React-Redux：React.useReducer 终极指南

2023-11-08 02:39:54

猛男必看！用 20 行代码代替 React-Redux

引言

React 社区中流传着这样一句话：Redux，像一把双刃剑，用得好，功能强大；用得不好，维护噩梦。 对于开发者来说，寻求一种既能享受到 Redux 带来的强大状态管理，又能规避其复杂性的方案是十分必要的。

本文将为你揭秘一个秘密武器：React.useReducer 。这个低调的 Hooks 却能轻松取代 React-Redux，实现状态管理的简洁高效。

Redux 的替身：React.useReducer

React.useReducer 是 Redux 中 reducer 概念在 Hooks API 上的体现。它允许你直接在 React 组件中管理状态，而无需引入 Redux 库。

要使用 React.useReducer，只需创建一个 reducer 函数，这个函数接受两个参数：当前状态和一个动作对象，并返回一个新的状态。然后，在组件中调用 useReducer 钩子，传递 reducer 函数和一个初始状态，就可以得到一个状态值和一个分派函数。

用 20 行代码替代 React-Redux

以下是用 React.useReducer 替代 React-Redux 的完整代码示例（不足 20 行）：

import React, { useReducer } from "react";

// reducer 函数
const reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
};

// 组件
const Counter = () => {
  const [count, dispatch] = useReducer(reducer, 0);

  return (
    <div>
      <h1>计数：{count}</h1>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
    </div>
  );
};