用动画和实战打开 React Hooks（三）：useReducer 和 useContext

本文由图雀社区成员 mRc 写作而成，欢迎加入图雀社区，一起创作精彩的免费技术教程，予力编程行业发展。

如果您觉得我们写得还不错，记得 点赞 + 关注 + 评论 三连，鼓励我们写出更好的教程💪

随着应用状态越来越复杂，我们迫切需要状态与数据流管理的解决方案。熟悉 React 开发的同学一定听说过 Redux，而在这篇文章中，我们将通过 useReducer + useContext 的组合实现一个简易版的 Redux。首先，我们将带你重新认识“老朋友”useState，并借此引出这篇文章的主角：Reducer 函数与 useReducer 钩子，并通过实战一步步带你理清数据流和状态管理的基本思想。

useState：柳暗花明

欢迎继续阅读《用动画和实战打开 React Hooks 系列》：

• 《用动画和实战打开 React Hooks（一）：useState 和 useEffect》
• 《用动画和实战打开 React Hooks（二）：自定义 Hook 和 useCallback》

如果你想要直接从这一篇开始学习，那么请克隆我们为你提供的源代码：

git clone -b third-part https://github.com/tuture-dev/covid-19-with-hooks.git

# 如果你访问 GitHub 不流畅，我们还提供了 Gitee 地址
git clone -b third-part https://gitee.com/tuture/covid-19-with-hooks.git

在这第三篇文章中，我们将首先来重温一下 useState 。在之前的两篇教程中，我们可以说和 useState 并肩作战了很久，是我们非常“熟悉”的老朋友了。但是回过头来，我们真的足够了解它吗？

一个未解决的问题

你很有可能在使用 useState 的时候遇到过一个问题：通过 Setter 修改状态的时候，怎么读取上一个状态值，并在此基础上修改呢？如果你看文档足够细致，应该会注意到 useState 有一个函数式更新（Functional Update）的用法，以下面这段计数器（代码来自 React 官网）为例：

function Counter({
   initialCount}) {
   
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {
   count}
      <button onClick={
   () => setCount(initialCount)}>Reset</button>
      <button onClick={
   () => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={
   () => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

可以看到，我们传入 setCount 的是一个函数，它的参数是之前的状态，返回的是新的状态。熟悉 Redux 的朋友马上就指出来了：这其实就是一个 Reducer 函数。

Reducer 函数的前生今世

Redux 文档里面已经详细地阐述了 Reducer 函数，但是我们这里将先回归最基础的概念，暂时忘掉框架相关的知识。在学习 JavaScript 基础时，你应该接触过数组的 reduce 方法，它可以用一种相当炫酷的方式实现数组求和：

const nums = [1, 2, 3]
const value = nums.reduce((acc, next) => acc + next, 0)

其中 reduce 的第一个参数 (acc, next) => acc + next 就是一个 Reducer 函数。从表面上来看，这个函数接受一个状态的累积值 acc 和新的值 next，然后返回更新过后的累积值 acc + next。从更深层次来说，Reducer 函数有两个必要规则：

• 只返回一个值
• 不修改输入值，而是返回新的值

第一点很好判断，其中第二点则是很多新手踩过的坑，对比以下两个函数：

// 不是 Reducer 函数！
function buy(cart, thing) {
   
  cart.push(thing);
  return cart;
}

// 正宗的 Reducer 函数
function buy(cart, thing) {
   
  return cart.concat(thing);
}

上面的函数调用了数组的 push 方法，会就地修改输入的 cart 参数（是否 return 都无所谓了），违反了 Reducer 第二条规则，而下面的函数通过数组的 concat 方法返回了一个全新的数组，避免了直接修改 cart 。

我们回过头来看之前 useState 的函数式更新写法：

setCount(prevCount => prevCount + 1);

是不是一个很标准的 Reducer？

最熟悉的陌生人

我们在前两篇教程中大量地使用了 useState，你可能就此认为 useState 应该是最底层的元素了。但实际上在 React 的源码中，useState 的实现使用了 useReducer（本文的主角，下面会讲到）。在 React 源码中有这么一个关键的函数 basicStateReducer（去掉了源码中的 Flow 类型定义）：

function basicStateReducer(state, action) {
   
  return typeof action === 'function' ? action(state) : action;
}

于是，当我们通过 setCount(prevCount => prevCount + 1) 改变状态时，传入的 action 就是一个 Reducer 函数，然后调用该函数并传入当前的 state，得到更新后的状态。而我们之前通过传入具体的值修改状态时（例如 setCount(5)），由于不是函数，所以直接取传入的值作为更新后的状态。

提示

这里选取的是 React v16.13.1 的源码，但是整体的实现应该已经趋于稳定，原理上不会相差太多。

听上去还是有点迷迷糊糊？又到了我们的动画环节。首先，我们传入的 action 是一个具体的值：

当传入 Setter 的是一个 Reducer 函数的时候：

是不是一下子就豁然开朗了？

实战环节

这一步要写的代码比较多（可自行复制粘贴哈），我们要实现如下图所示的历史趋势图展示效果：

注意到我们展示了三个历史趋势（确诊病例 Cases、死亡病例 Deaths 和治愈病例 Recovered），并且每张历史趋势图可以调节过去的天数（从 0 到 30 天）。

实现历史趋势图

首先，让我们来实现历史曲线图 HistoryChart 组件。创建 src/components/HistoryChart.js 组件，代码如下：

// src/components/HistoryChart.js
import React from "react";
import {
   
  AreaChart,
  CartesianGrid,
  XAxis,
  YAxis,
  Tooltip,
  Area,
} from "recharts";

const TITLE2COLOR = {
   
  Cases: "#D0021B",
  Deaths: "#4A4A4A",
  Recovered: "#09C79C",
};

function HistoryChart({
    title, data, lastDays, onLastDaysChange }) {
   
  const colorKey = `color${
     title}`;
  const color = TITLE2COLOR[title];

  return (
    <div>
      <AreaChart
        width={
   400}
        height={
   150}
        data={
   data.slice(-lastDays)}
        margin={
   {
    top: 10, right: 30, left: 10, bottom: 0 }}
      >
        <defs>