1. Toy模板网首页
  2. > Toy博客

React 18 迁移状态逻辑至 Reducer 中

10月前 作者：木蓝茶陌*_* 分类：Toy博客 阅读(60) 违法举报

这篇具有很好参考价值的文章主要介绍了React 18 迁移状态逻辑至 Reducer 中。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

参考文章

迁移状态逻辑至 Reducer 中

对于拥有许多状态更新逻辑的组件来说，过于分散的事件处理程序可能会令人不知所措。对于这种情况，可以将组件的所有状态更新逻辑整合到一个外部函数中，这个函数叫作 reducer。

使用 reducer 整合状态逻辑

随着组件复杂度的增加，将很难一眼看清所有的组件状态更新逻辑。例如，下面的 TaskApp 组件有一个数组类型的状态 tasks，并通过三个不同的事件处理程序来实现任务的添加、删除和修改：

import { useState } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';

export default function TaskApp() {
  const [tasks, setTasks] = useState(initialTasks);

  function handleAddTask(text) {
    setTasks([
      ...tasks,
      {
        id: nextId++,
        text: text,
        done: false,
      },
    ]);
  }

  function handleChangeTask(task) {
    setTasks(
      tasks.map((t) => {
        if (t.id === task.id) {
          return task;
        } else {
          return t;
        }
      })
    );
  }

  function handleDeleteTask(taskId) {
    setTasks(tasks.filter((t) => t.id !== taskId));
  }

  return (
    <>
      <h1>布拉格的行程安排</h1>
      <AddTask onAddTask={handleAddTask} />
      <TaskList
        tasks={tasks}
        onChangeTask={handleChangeTask}
        onDeleteTask={handleDeleteTask}
      />
    </>
  );
}

let nextId = 3;
const initialTasks = [
  {id: 0, text: '参观卡夫卡博物馆', done: true},
  {id: 1, text: '看木偶戏', done: false},
  {id: 2, text: '打卡列侬墙', done: false},
];

这个组件的每个事件处理程序都通过 setTasks 来更新状态。随着这个组件的不断迭代，其状态逻辑也会越来越多。为了降低这种复杂度，并让所有逻辑都可以存放在一个易于理解的地方，可以将这些状态逻辑移到组件之外的一个称为 reducer 的函数中。

Reducer 是处理状态的另一种方式。可以通过三个步骤将 useState 迁移到 useReducer：

  1. 将设置状态的逻辑 修改 成 dispatch 的一个 action；
  2. 编写 一个 reducer 函数；
  3. 在组件中 使用 reducer。

第 1 步: 将设置状态的逻辑修改成 dispatch 的一个 action

事件处理程序目前是通过设置状态来 实现逻辑的：

function handleAddTask(text) {
  setTasks([
    ...tasks,
    {
      id: nextId++,
      text: text,
      done: false,
    },
  ]);
}

function handleChangeTask(task) {
  setTasks(
    tasks.map((t) => {
      if (t.id === task.id) {
        return task;
      } else {
        return t;
      }
    })
  );
}

function handleDeleteTask(taskId) {
  setTasks(tasks.filter((t) => t.id !== taskId));
}

移除所有的状态设置逻辑。只留下三个事件处理函数：

  • handleAddTask(text) 在用户点击 “添加” 时被调用。
  • handleChangeTask(task) 在用户切换任务或点击 “保存” 时被调用。
  • handleDeleteTask(taskId) 在用户点击 “删除” 时被调用。

使用 reducers 管理状态与直接设置状态略有不同。它不是通过设置状态来告诉 React “要做什么”，而是通过事件处理程序 dispatch 一个 “action” 来指明 “用户刚刚做了什么”。（而状态更新逻辑则保存在其他地方！）因此，不再通过事件处理器直接 “设置 task”，而是 dispatch 一个 “添加/修改/删除任务” 的 action。这更加符合用户的思维。

function handleAddTask(text) {
  dispatch({
    type: 'added',
    id: nextId++,
    text: text,
  });
}

function handleChangeTask(task) {
  dispatch({
    type: 'changed',
    task: task,
  });
}

传递给 dispatch 的对象叫做 “action”：

function handleDeleteTask(taskId) {
  dispatch(
    // "action" 对象：
    {
      type: 'deleted',
      id: taskId,
    }
  );
}

它是一个普通的 JavaScript 对象。它的结构是由你决定的，但通常来说，它应该至少包含可以表明 发生了什么事情 的信息。

注意：action 对象可以有多种结构。

按照惯例，通常会添加一个字符串类型的 type 字段来描述发生了什么，并通过其它字段传递额外的信息。type 是特定于组件的，在这个例子中 added 和 addded_task 都可以。选一个能描述清楚发生的事件的名字！

dispatch({
  // 针对特定的组件
  type: 'what_happened',
  // 其它字段放这里
});

第 2 步: 编写一个 reducer 函数

reducer 函数就是放置状态逻辑的地方。它接受两个参数，分别为当前 state 和 action 对象，并且返回的是更新后的 state：

function yourReducer(state, action) {
  // 给 React 返回更新后的状态
}

React 会将状态设置为从 reducer 返回的状态。

在这个例子中，要将状态设置逻辑从事件处理程序移到 reducer 函数中，需要：

  1. 声明当前状态（tasks）作为第一个参数；
  2. 声明 action 对象作为第二个参数；
  3. 从 reducer 返回 下一个 状态（React 会将旧的状态设置为这个最新的状态）。

下面是所有迁移到 reducer 函数的状态设置逻辑：

function tasksReducer(tasks, action) {
  if (action.type === 'added') {
    return [
      ...tasks,
      {
        id: action.id,
        text: action.text,
        done: false,
      },
    ];
  } else if (action.type === 'changed') {
    return tasks.map((t) => {
      if (t.id === action.task.id) {
        return action.task;
      } else {
        return t;
      }
    });
  } else if (action.type === 'deleted') {
    return tasks.filter((t) => t.id !== action.id);
  } else {
    throw Error('未知 action: ' + action.type);
  }
}

由于 reducer 函数接受 state（tasks）作为参数，因此可以 在组件之外声明它。这减少了代码的缩进级别，提升了代码的可读性。

注意：上面的代码使用了 if/else 语句，但是在 reducers 中使用 switch 语句 是一种惯例。两种方式结果是相同的，但 switch 语句读起来一目了然。

以后会像这样使用：

function tasksReducer(tasks, action) {
  switch (action.type) {
    case 'added': {
      return [
        ...tasks,
        {
          id: action.id,
          text: action.text,
          done: false,
        },
      ];
    }
    case 'changed': {
      return tasks.map((t) => {
        if (t.id === action.task.id) {
          return action.task;
        } else {
          return t;
        }
      });
    }
    case 'deleted': {
      return tasks.filter((t) => t.id !== action.id);
    }
    default: {
      throw Error('未知 action: ' + action.type);
    }
  }
}

建议将每个 case 块包装到 { 和 } 花括号中，这样在不同 case 中声明的变量就不会互相冲突。此外，case 通常应该以 return 结尾。如果忘了 return，代码就会 进入 到下一个 case，这就会导致错误！

如果还不熟悉 switch 语句，使用 if/else 也是可以的。

第 3 步: 在组件中使用 reducer

最后，需要将 tasksReducer 导入到组件中。记得先从 React 中导入 useReducer Hook：

import { useReducer } from 'react';

接下来，就可以替换掉之前的 useState:

const [tasks, setTasks] = useState(initialTasks);

只需要像下面这样使用 useReducer:

const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);

useReducer 和 useState 很相似——必须给它传递一个初始状态，它会返回一个有状态的值和一个设置该状态的函数（在这个例子中就是 dispatch 函数）。但是，它们两个之间还是有点差异的。

useReducer 钩子接受 2 个参数：

  1. 一个 reducer 函数
  2. 一个初始的 state

它返回如下内容：

  1. 一个有状态的值
  2. 一个 dispatch 函数（用来 “派发” 用户操作给 reducer）

现在一切都准备就绪了！在这里把 reducer 定义在了组件的末尾：

import { useReducer } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';

export default function TaskApp() {
  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);

  function handleAddTask(text) {
    dispatch({
      type: 'added',
      id: nextId++,
      text: text,
    });
  }

  function handleChangeTask(task) {
    dispatch({
      type: 'changed',
      task: task,
    });
  }

  function handleDeleteTask(taskId) {
    dispatch({
      type: 'deleted',
      id: taskId,
    });
  }

  return (
    <>
      <h1>布拉格的行程安排</h1>
      <AddTask onAddTask={handleAddTask} />
      <TaskList
        tasks={tasks}
        onChangeTask={handleChangeTask}
        onDeleteTask={handleDeleteTask}
      />
    </>
  );
}

function tasksReducer(tasks, action) {
  switch (action.type) {
    case 'added': {
      return [
        ...tasks,
        {
          id: action.id,
          text: action.text,
          done: false,
        },
      ];
    }
    case 'changed': {
      return tasks.map((t) => {
        if (t.id === action.task.id) {
          return action.task;
        } else {
          return t;
        }
      });
    }
    case 'deleted': {
      return tasks.filter((t) => t.id !== action.id);
    }
    default: {
      throw Error('未知 action: ' + action.type);
    }
  }
}

...

如果有需要，甚至可以把 reducer 移到一个单独的文件中：

// tasksReducer.js
export default function tasksReducer(tasks, action) {
  switch (action.type) {
    case 'added': {
      return [
        ...tasks,
        {
          id: action.id,
          text: action.text,
          done: false,
        },
      ];
    }
    case 'changed': {
      return tasks.map((t) => {
        if (t.id === action.task.id) {
          return action.task;
        } else {
          return t;
        }
      });
    }
    case 'deleted': {
      return tasks.filter((t) => t.id !== action.id);
    }
    default: {
      throw Error('未知 action：' + action.type);
    }
  }
}

当像这样分离关注点时，我们可以更容易地理解组件逻辑。现在，事件处理程序只通过派发 action 来指定 发生了什么，而 reducer 函数通过响应 actions 来决定 状态如何更新。

对比 useState 和 useReducer

Reducers 并非没有缺点！以下是比较它们的几种方法：

  • 代码体积： 通常，在使用 useState 时，一开始只需要编写少量代码。而 useReducer 必须提前编写 reducer 函数和需要调度的 actions。但是，当多个事件处理程序以相似的方式修改 state 时，useReducer 可以减少代码量。
  • 可读性： 当状态更新逻辑足够简单时，useState 的可读性还行。但是，一旦逻辑变得复杂起来，它们会使组件变得臃肿且难以阅读。在这种情况下，useReducer 允许将状态更新逻辑与事件处理程序分离开来。
  • 可调试性： 当使用 useState 出现问题时, 很难发现具体原因以及为什么。 而使用 useReducer 时， 可以在 reducer 函数中通过打印日志的方式来观察每个状态的更新，以及为什么要更新（来自哪个 action）。 如果所有 action 都没问题，就知道问题出在了 reducer 本身的逻辑中。 然而，与使用 useState 相比，必须单步执行更多的代码。
  • 可测试性： reducer 是一个不依赖于组件的纯函数。这就意味着可以单独对它进行测试。一般来说，我们最好是在真实环境中测试组件，但对于复杂的状态更新逻辑，针对特定的初始状态和 action，断言 reducer 返回的特定状态会很有帮助。
  • 个人偏好： 并不是所有人都喜欢用 reducer，没关系，这是个人偏好问题。可以随时在 useState 和 useReducer 之间切换，它们能做的事情是一样的！

如果在修改某些组件状态时经常出现问题或者想给组件添加更多逻辑时，建议还是使用 reducer。当然，也不必整个项目都用 reducer，这是可以自由搭配的。甚至可以在一个组件中同时使用 useState 和 useReducer。

编写一个好的 reducers

编写 reducers 时最好牢记以下两点：

  • reducers 必须是纯粹的。 这一点和 状态更新函数 是相似的，reducers 在是在渲染时运行的！（actions 会排队直到下一次渲染)。 这就意味着 reducers 必须纯净，即当输入相同时，输出也是相同的。它们不应该包含异步请求、定时器或者任何副作用（对组件外部有影响的操作）。它们应该以不可变值的方式去更新 对象 和 数组。
  • 每个 action 都描述了一个单一的用户交互，即使它会引发数据的多个变化。 举个例子，如果用户在一个由 reducer 管理的表单（包含五个表单项）中点击了 重置按钮，那么 dispatch 一个 reset_form 的 action 比 dispatch 五个单独的 set_field 的 action 更加合理。如果在一个 reducer 中打印了所有的 action 日志，那么这个日志应该是很清晰的，它能让你以某种步骤复现已发生的交互或响应。这对代码调试很有帮助！

使用 Immer 简化 reducers

与在平常的 state 中 修改对象 和 数组 一样，可以使用 Immer 这个库来简化 reducer。在这里，useImmerReducer 让你可以通过 push 或 arr[i] = 来修改 state ：

import { useImmerReducer } from 'use-immer';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';

function tasksReducer(draft, action) {
  switch (action.type) {
    case 'added': {
      draft.push({
        id: action.id,
        text: action.text,
        done: false,
      });
      break;
    }
    case 'changed': {
      const index = draft.findIndex((t) => t.id === action.task.id);
      draft[index] = action.task;
      break;
    }
    case 'deleted': {
      return draft.filter((t) => t.id !== action.id);
    }
    default: {
      throw Error('未知 action：' + action.type);
    }
  }
}

export default function TaskApp() {
  const [tasks, dispatch] = useImmerReducer(tasksReducer, initialTasks);

  function handleAddTask(text) {
    dispatch({
      type: 'added',
      id: nextId++,
      text: text,
    });
  }

  function handleChangeTask(task) {
    dispatch({
      type: 'changed',
      task: task,
    });
  }

  function handleDeleteTask(taskId) {
    dispatch({
      type: 'deleted',
      id: taskId,
    });
  }

  return (
    <>
      <h1>布拉格的行程安排</h1>
      <AddTask onAddTask={handleAddTask} />
      <TaskList
        tasks={tasks}
        onChangeTask={handleChangeTask}
        onDeleteTask={handleDeleteTask}
      />
    </>
  );
}

...

Reducers 应该是纯净的，所以它们不应该去修改 state。而 Immer 提供了一种特殊的 draft 对象，可以通过它安全的修改 state。在底层，Immer 会基于当前 state 创建一个副本。这就是为什么通过 useImmerReducer 来管理 reducers 时，可以修改第一个参数，且不需要返回一个新的 state 的原因。文章来源地址https://www.toymoban.com/news/detail-690151.html

摘要

  • 把 useState 转化为 useReducer：
    1. 通过事件处理函数 dispatch actions；
    2. 编写一个 reducer 函数，它接受传入的 state 和一个 action，并返回一个新的 state；
    3. 使用 useReducer 替换 useState；
  • Reducers 可能需要写更多的代码，但是这有利于代码的调试和测试。
  • Reducers 必须是纯净的。
  • 每个 action 都描述了一个单一的用户交互。
  • 使用 Immer 来帮助在 reducer 里直接修改状态。

到了这里，关于React 18 迁移状态逻辑至 Reducer 中的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • React 18 在组件间共享状态

    React 18 在组件间共享状态

    参考文章 有时候，希望两个组件的状态始终同步更改。要实现这一点，可以将相关 state 从这两个组件上移除，并把 state 放到它们的公共父级，再通过 props 将 state 传递给这两个组件。这被称为“状态提升”，这是编写 React 代码时常做的事。 在这个例子中，父组件 Accordion 渲

    2024年02月10日
    浏览(44)

  • React的hooks---useReducer

    useReducer 作为 useState 的代替方案，在某些场景下使用更加适合，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。 使用 useReducer 还能给那些会触发深更新的组件做性能优化，因为父组件可以向自组件传递 dispatch 而不是回调函数 useReducer 初始化

    2024年02月15日
    浏览(43)
  • React 新版官方文档 (一) useReducer 用法详解

    React 新版官方文档 (一) useReducer 用法详解

    useReducer 是一个可以让你向组件中添加 reducer 的 Hook 基本用法 比 useState 多了一个处理函数，该函数可以根据不同的分发状态来对应的改变状态 注意：state 不可修改 不能这样写， reducer 函数应当返回一个新对象 不要重新执行初始函数 第一种写法会导致每次渲染时候都调用

    2024年02月13日
    浏览(37)
  • 【前端】React快速入门+Redux状态管理

    【前端】React快速入门+Redux状态管理

    本文旨在记录react的基础内容，帮助有需要的同学快速上手,需要进一步了解描述更加稳妥和全面的信息，请查阅官方文档 官方文档点击这里进行跳转 react框架 vue,react,angular这几种主流前端框架使用频率较高…本质还是js库。 React.js是一个用于构建用户界面的JavaScript库。它由

    2024年02月12日
    浏览(50)
  • qiankun：react18主应用 + 微应用 react18 + vue3

    qiankun：react18主应用 + 微应用 react18 + vue3

    一：主应用 搭建react项目 安装Antd 在 index.js中引入 安装react-router ： 在 index.js中引入 安装 qiankun ： 在主应用中注册微应用，在 index.js中引入 注：子应用嵌入到主应用的地方，id要跟index.js下registerMicroApps里面的container设置一致 修改App.js文件，将如下代码放入App.js 修改App.css样

    2024年02月16日
    浏览(40)
  • React18入门（第二篇）——React18+Ts项目配置husky、eslint、pretttier、commitLint

    React18入门（第二篇）——React18+Ts项目配置husky、eslint、pretttier、commitLint

    我的项目版本如下： React： V18.2.0 Node.js: V16.14.0 TypeScript：最新版 工具： VsCode 本文将采用图文详解的方式，手把手带你快速完成在React项目中配置husky、prettier、commitLint，实现编码规范的统一，git提交规范的统一。 1.1 装包 1.2 ESLint 插件安装 1.3 创建命令并使用 新增命令 执行

    2024年02月08日
    浏览(56)
  • React源码解析18（1）------ React.createElement 和 jsx

    React源码解析18（1）------ React.createElement 和 jsx

    我们知道在React17版本之前，我们在项目中是一定需要引入react的。 import React from “react” 即便我们有时候没有使用到React，也需要引入。原因是什么呢？ 在React项目中，如果我们使用了模板语法JSX，我们知道它要先经过babel的转译。那babel会将JSX转换成什么样子的格式呢？ 可

    2024年02月13日
    浏览(37)
  • 创建react脚手架项目——demo（react18 + react-router 6）+ react项目打包部署

    创建react脚手架项目——demo（react18 + react-router 6）+ react项目打包部署

    全局安装 create-react-app 说明：不建议安装全局，建议使用 npx 命令安装，具体可参考官网，如下： 官网： https://zh-hans.legacy.reactjs.org/docs/create-a-new-react-app.html. 1.2.1 问题1——npm ERR! code ENOTFOUND（网络问题clashx） 问题描述，如下： 解决问题——方式1 如果使用了clashx，可能是它

    2024年02月07日
    浏览(73)

  • react 实现监听逻辑

    需求： 在一个页面下有多个子tab 在某些tab 下，或者父节点的数据更新的时候，其他子tab 或者父节点也要同步更新 进程： 正常情况下会把所有用到的数据都移动到父节点，修改行为也都放在父节点 但如果这样的话父节点的数据会非常的多，而且有可能只是某两个子节点的数

    2024年02月09日
    浏览(27)

  • 【react】react18的学习（十一）– 底层原理（一）之 diff 算法

    diff算法、fiber链表 步骤：（追求多复用，快渲染） 首次渲染，缓存虚拟dom或fiber链表（17及以后）； 组件更新，将新生成的虚拟dom与已有的真实dom的fiber链表对比； 遵循同级对比、深度对比原则，先依次找节点对比； 对比过程中，第一轮对比：按链表顺序对比，节点key值相

    2024年02月17日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包