react之reducers

第三章 - 状态管理

迁移状态逻辑至 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} /><TaskListtasks={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
第一步:将设置状态的逻辑修改成dispatch的一个action

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

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

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

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,});
}

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

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

他就是一个普通的JavaScript对象。它的结构由你来决定,但通常来说,他应该至少包含可以表明发生了什么事情的信息。(在后面的步骤中,你将会学习如何添加一个 dispatch 函数。)

注意

action 对象可以有多种结构。

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

dispatch({// 针对特定的组件type: 'what_happened',// 其它字段放这里});
第二步:编写一个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.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) 作为参数,因此你可以在组件之外声明它。这减少了代码的缩进级别,提升了代码的可读性。(即可以将庞大的reducer函数单独提取成一个文件,与组件分开,提升代码阅读性)

上面的代码使用了 if/else 语句,但是在 reducers 中使用 switch 语句 是一种惯例。两种方式结果是相同的,但 switch 语句读起来一目了然。我们建议将每个 case 块包装到 {} 花括号中,这样在不同 case 中声明的变量就不会互相冲突。此外,case 通常应该以 return 结尾。如果你忘了 return,代码就会 进入 到下一个 case,这就会导致错误

第三步:在组件中使用reducer

最后,你需要将 tasksReducer导入到组件中。记得先从react中导入 useReducer Hook:

import { useReducer } from 'react';

接下来你就能替换掉之前的useState:

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} /><TaskListtasks={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);}}
}let nextId = 3;
const initialTasks = [{id: 0, text: '参观卡夫卡博物馆', done: true},{id: 1, text: '看木偶戏', done: false},{id: 2, text: '打卡列侬墙', done: false}
];

如果有需要,你甚至可以把reducer移到一个单独的文件中。当像这样分离关注点时,我们可以更容易地理解组件逻辑。现在,事件处理程序只通过派发 action 来指定 发生了什么,而 reducer 函数通过响应 actions 来决定 状态如何更新

对比 useState 和 useReducer

Reducer并非没有缺点,以下是比较它们的几种方法:

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

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

编写一个好的reducers

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

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

使用 Immer 简化 reducers

与在平常的 state 中 修改对象 和 数组 一样,你可以使用 Immer 这个库来简化 reducer。在这里,useImmerReducer 让你可以通过 pusharr[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} /><TaskListtasks={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},
];

Reducers应该是纯净的,所以它们不应该去修改state。而Immer为你提供了一种特殊的 draft 对象,你可以通过它安全的修改state。在底层,Immer 会基于当前state 创建一个副本。这就是为什么 useImmerReducer 来管理 reducers 时,可以直接修改第一个参数,且不需要返回一个新的state

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/10274.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

视频号小店做店的最新最全攻略,小白也能快速上手轻松变现!

大家好&#xff0c;我是电商花花。 从开始接触视频号小店到现在已经两年多时间了&#xff0c;关于视频号小店也有不少经验和感触。 最近越来越多的人开始进入视频号小店的电商赛道&#xff0c;有人日均销售额做到几万甚至十几万。 想在视频号上变现赚钱&#xff0c;但是苦于…

【Android】Apk图标的提取、相同目录下相同包名提取的不同图标apk但是提取结果相同的bug解决

一般安卓提取apk图标我们有两种常用方法&#xff1a; 1、如果已经获取到 ApplicationInfo 对象&#xff08;假设名为 appInfo&#xff09;&#xff0c;那么我们获取方法为&#xff1a; appInfo.loadIcon(packageManager)// 返回一个 Drawable 对象2、 如果还没获取到 Applica…

DPDK e1000 ring buffer

基本原理 如图&#xff08;盗图&#xff09; 内存&#xff08;RAM&#xff09;和网卡&#xff08;NIC&#xff09;之间通过Descriptor ring 交互网络报文数据内存中需要申请内存 packet buffer 的内存池&#xff0c;内存池中的每个实例&#xff0c;地址是物理连续的或者IOVA…

【Vue基础】Vue在组件数据传递详解

Vue核心基础-CSDN博客 先回顾Vue特性&#xff1a; Vue.js 是一个用于构建用户界面的渐进式框架&#xff0c;具有许多强大的特性。以下是一些主要的 Vue 特性&#xff1a; 响应式数据&#xff1a;Vue 使用双向绑定来实现数据的响应式更新。当数据发生变化时&#xff0c;视图会自…

JAVA毕业设计138—基于Java+Springboot+Vue的医院预约挂号小程序(源代码+数据库)

毕设所有选题&#xff1a; https://blog.csdn.net/2303_76227485/article/details/131104075 基于JavaSpringbootVue的医院预约挂号小程序(源代码数据库)138 一、系统介绍 本系统前后端分离带小程序和后台 小程序&#xff08;用户端&#xff09;&#xff0c;后台管理系统&a…

OpenCv中cv2.subtract(image,blurred)与(image-blurred)的区别

目录 一、cv2.subtract()函数二、cv2.subtract(image,blurred)和&#xff08;image-blurred&#xff09;处理效果对比2.1 代码2.2 输出结果 三、总结 一、cv2.subtract()函数 cv2.subtract是OpenCV库中的一个函数&#xff0c;用于进行图像减法运算。它可以很方便地进行两个图像…

鸿蒙OpenHarmony:【关于deps、external_deps的使用】

关于deps、external_deps的使用 在添加一个模块的时候&#xff0c;需要在BUILD.gn中声明它的依赖&#xff0c;为了便于后续处理部件间依赖关系&#xff0c;我们将依赖分为两种——部件内依赖deps和部件间依赖external_deps。 依赖分类 开发前请熟悉鸿蒙开发指导文档&#xff…

conan2 基础入门(01)-介绍

conan2 基础入门(01)-介绍 文章目录 conan2 基础入门(01)-介绍⭐什么是conan官网Why use Conan? ⭐使用现状版本情况个人知名开源企业 ⭐ConanCenter包中心github ⭐说明文档END ⭐什么是conan 官网 官网&#xff1a;Conan 2.0: C and C Open Source Package Manager 一句话来…

XML文档基本语法

XML文档基本语法包括以下几个知识点&#xff1a; 开始标记&#xff08;Start Tag&#xff09;&#xff1a;开始标记是XML元素的起始符号&#xff0c;由左尖括号&#xff08;<&#xff09;和元素名称组成。例如&#xff0c;是一个开始标记&#xff0c;表示一个名为"book…

java后端解决跨域问题常用配置类

在开发前后端分离项目时从前端调用后台请求常常无法响应&#xff0c;这是因为浏览器存在一个跨域问题&#xff0c;只需要添加一个config配置类。 Configuration public class WebConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry regis…

Array.map解析

map方法会创建一个新数组。该方法会循环数组中的每个值&#xff0c;如果仅仅是想循环数组不需要返回值使用数组的forEach方法就可以。原数组中的每个元素都调用一次提供的函数后的返回值组成。Array.map 它接收一个函数 这个函数可以接收三个参数 数组的每个值item 这个值的索引…

SC-Lego-LOAM建图与ndt_localization的实车实现

参考&#xff1a;https://blog.csdn.net/weixin_44303829/article/details/121524380 https://github.com/AbangLZU/SC-LeGO-LOAM.git https://github.com/AbangLZU/ndt_localizer.git 将建图和定位分别使用lego-loam和ndt来进行&#xff0c;实车上的效果非常不错&#xff0c;…

STM32F103学习笔记 | 7.使用寄存器点亮LED灯

int main(void) { // 分析指南者硬件原理图得知要实现点亮灯泡需要将PB0设置为低电位&#xff0c; // 查阅STM32F10x中文手册的端口配置低寄存器&#xff0c;得知一个PB有8个配置位&#xff0c;查阅手册找到了PB0的位置是3:2位置&#xff0c; // 插入未知知识&#xff1a;将端…

EMAIL-PHP功能齐全的发送邮件类可以发送HTML和附件

EMAIL-PHP功能齐全的发送邮件类可以发送HTML和附件 <?php class Email { //---设置全局变量 var $mailTo ""; // 收件人 var $mailCC ""; // 抄送 var $mailBCC ""; // 秘密抄送 var $mailFrom ""; // 发件人 var $mailSubje…

获取Android开发板已连接WiFi密码

硬件/软件环境&#xff1a; 1&#xff09;全志芯片开发板A40i 2&#xff09;Android Studio Giraffe | 2022.3.1 Patch 3 连接条件&#xff1a; 1)两端都是USB-A接口线&#xff0c;一端插入电脑端USB接口&#xff0c;另一端插入开发板USB接口&#xff1b; 2&#xff09;Andr…

基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (二)

基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; #Options local_llm llama3 llm ChatOllama(modellocal_llm, format"json", temperature0) #embeddings #embeddings OllamaEmbeddings(model"nomic-embed-text") embed…

作为网络安全工程师需要掌握的安全小知识!

网络安全风险无处不在&#xff0c;今天为大家梳理了一些网络安全相关的小知识&#xff0c;希望能进一步提升大家的安全意识&#xff0c;帮助大家建立更加安全的网络环境。 一、主机电脑安全 1、操作系统安全&#xff1a;安装操作系统时需要选择合适的版本&#xff0c;及时打补…

(Java)心得:LeetCode——10.正则表达式匹配

一、原题 给你一个字符串 s 和一个字符规律 p&#xff0c;请你来实现一个支持 . 和 * 的正则表达式匹配。 . 匹配任意单个字符* 匹配零个或多个前面的那一个元素 所谓匹配&#xff0c;是要涵盖 整个 字符串 s的&#xff0c;而不是部分字符串。 示例 1&#xff1a; 输入&am…

制造业如何选择合适的项目管理软件?(内含软件推荐)

近期&#xff0c;收到很多小伙伴的提问&#xff1a;“想了解制造行业如何选择到合适的项目管理软件&#xff1f;”在竞争激烈的市场环境中&#xff0c;有效的项目管理对于制造业的发展至关重要&#xff0c;而项目管理软件则是重要支撑&#xff0c;能帮助企业更好地规划和跟踪项…

ok_Keil实用小技巧 | Keil定制Hex文件名实现的方法

Keil实用小技巧 | Keil定制Hex文件名实现的方法 echo off REM 可执行文件&#xff08;Hex&#xff09;文件名 set HEX_NAMEDemo REM 可执行文件&#xff08;Hex&#xff09;文件路径 set HEX_PATH.\Objects REM 定制Hex输出路径 set OUTPUT_PATH.\Output REM 软件版本文件…