【前端知识】React 基础巩固(三十一)——Redux的简介

React 基础巩固(三十一)——Redux

一、Redux是个纯函数

  1. 概念

纯函数(确定的输入一定产生确定的输出,函数在执行过程中不产生副作用):

  • 在程序设计中,若一个函数符合以下条件,那么这个函数就被称为纯函数
  • 此函数在相同的输入值时,需产生相同的输出
  • 函数的输出和输入值以外的其他隐藏信息或状态无关,也和由I/O设备产生的外部输出无关
  • 函数不能有语义上可观察的函数副作用,诸如“触发事件”,使输出设备输出或更改输出值以外物件的内容

副作用:本身是医学概念,在计算机科学中,表示在执行一个函数时,除了返回函数值外,还对调用函数产生了附加的影响。例如,修改了全局变量,修改参数或改变外部的存储。

  1. 作用
  • 可以放心的编写和使用
  • 保证函数的纯度,只需关心相应的业务逻辑,无需关心传入的内容是如何获得的或者依赖其他的外部变量是否已经发生了修改
  • 确定输入内容不会被任意篡改,有确定的输入,有确定的输出。

二、为什么需要Redux

  1. 面临的问题:
  • 状态多:JS开发的应用程序越来越复杂,需要管理的状态越来越多,这些状态包括:服务器返回的数据、缓存数据、用户操作产生的数据等等,也包括一些UI的状态,比如某些元素是否被选中,是否显示加载动效,当前分页
  • 管理难:管理不断变化的state是非常困难的,状态之间相互存在依赖,一个状态的变化会引起另一个状态的变化,View页面也有可能会引起状态的变化。随着应用程序越来越复杂,state的变化变得难以控制和追踪
  • 靠自己:React是在视图层帮助我们解决了DOM的渲染过程,但是State依然留给我们自己来管理。无论是组件定义的state,组件之间的通信,还是通过Context进行的数据共享,这些维护的工作最终由我们自己来决定,而非React。
  1. Redux的出现,能帮助我们管理State,Redux是JS的状态容器,提供了可预测的状态管理,Redux除了和React配合使用外,也可以和Vue等其他界面库一起使用。

三、Redux的核心理念

  1. Store

    定义统一的规范来存储数据

    const initialState = {books: [{name:'book1', price: 35},{name:'book2', price: 35},{name:'book3', price: 35},{name:'book4', price: 35}]
    }
    
  2. action

    Redux要求必须通过action来更新数据。action是一个普通JS对象,用来描述此次更新的type和content,所有数据的变化必须通过派发action来更新。

    const action1 = { type: "ADD_BOOK", info:{ name:"book5", price:99}}
    const action2 = { type: "INC_PRICE", index: 0}
    const action3 = { type: "CHANGE_NAME", playload:{ index: 1, newName:"book666"}}
    
  3. reducer

    reducer是一个纯函数,将传入的state和action结合起来生成一个新的state。

  • store/index.js
const { createStore } = require("redux");// 初始化数据
const initialState = {name: "test",title: "hello redux",
};// 定义reducer函数:纯函数
// 两个参数:
// 1.store中上一次的值;
// 2.本次需要更新的action
// 返回值:它的返回值会作为sto re之后存储的state
function reducer(state = initialState, action) {console.log("reducer:", state, action);// 有新数据进行更新的时候,那么返回一个新的stateif (action.type === "change_name") {return {...state,name: action.name,};} // 若没有新数据更新,返回之前的statereturn state;
}// 创建的store
const store = createStore(reducer);module.exports = store;
  • test.js
const store = require("./store");console.log(store.getState());// 使用action修改store中的数据
const nameAction = {type: "change_name",name: "change name test",
};
store.dispatch(nameAction);console.log(store.getState());const nameAction2 = {type: "change_name",name: "change name test111",
};
store.dispatch(nameAction2);console.log(store.getState());

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

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

相关文章

Docker 续

Docker 续 一、Docker 网络1.1 Docker 网络实现原理1.2 Docker 的网络模式1.2.1 Docker 网络模式分类 1.3 如何创建各类网络模式1.4 host模式1.5 container模式1.6 none模式1.7 bridge模式1.8 自定义网络 二、资源控制2.1 Cgroup2.2 CPU 资源控制2.2.1 设置CPU使用率上限2.2.2 …

Android compose学习笔记

如标题所言,就是一篇学习笔记而已,没有看的必要,只是写给自己看的,内容是慢慢更新的。 因为白天要上班,有时还会加班。而我自己也经常写一些个人项目,还会花时间玩游戏,而且现在所在的公司也不会…

c# Outlook检索设定问题

基于c# 设定outlook约会予定,时间格式是YYYY-MM-DD HH:mm 的情报。 问题发生: 根据开始时间(2023/01/01 7:00)条件查询该时间是否存在outlook信息时,明明存在一条数据,就是查询不出来数据 c#代码 Strin…

Observability:Synthetic monitoring - 动手实践

在我之前的如下文章里: Observability:Synthetic monitoring - 合成监测入门(一)(二) Observability:Synthetic monitoring - 创建浏览器监测,配置单独的浏览器监测器及项目 我详…

[flutter][报错]One or more plugins require a higher Android SDK version.

报文 One or more plugins require a higher Android SDK version. Fix this issue by adding the following to D:\github\flutter_password_saving_software\android\app\build.gradle: android {compileSdkVersion 33... }解决 修改方案:找到本地flutter安装目…

nginx路由

一般我们经常在访问网站时,通常会遇到输入某个页面的网址时,出现路由的转发,重定向等。可能访问的是一个网址,出来的时候就显示的是另外的地址。这是由于使用了nginx的缘故,保护了网址的安全性 (1&#xf…

数据预处理matlab

matlab数据的获取、预处理、统计、可视化、降维 数据的预处理 - MATLAB & Simulink - MathWorks 中国https://ww2.mathworks.cn/help/matlab/preprocessing-data.html 一、数据的获取 1.1 从Excel中获取 使用readtable() 例1: 使用spreadsheetImportOption…

跟着gpt学算法(c和python)-排序-冒泡排序

排序算法是将一组数据按照特定规则进行排列的算法。排序算法可以按照不同的标准进行分类,比如稳定性、时间复杂度、空间复杂度等。以下是一些常见的排序算法: 冒泡排序(Bubble Sort):相邻元素进行比较,较大…

JavaWeb_LeadNews_Day3-图片管理, 文章管理

JavaWeb_LeadNews_Day3-图片管理, 文章管理 图片管理图片上传实现思路获取用户信息将图片上传至minio 图片列表 文章管理频道列表查询文章列表查询文章发布实现思路具体代码 来源 图片管理 图片上传 实现思路 在GateWay解析前端请求, 获取用户信息, 存储在header中在Interce…

Vue整体架构分解

Vue.js的整体架构可以分解为以下几个部分: 文章目录 1. 数据驱动2. 组件化3. 响应式系统4. 虚拟DOM5. 插件系统6. 单文件组件7. 模板编译总结 1. 数据驱动 Vue的一个核心特点是数据驱动。Vue会在初始化的时候给数据提供一个observe监听,当数据变化时,会…

uniapp 微信小程序 input详解 带小数点的input、可查看密码的输入框input

官网文档地址 1、template <!-- 本示例未包含完整css&#xff0c;获取外链css请参考上文&#xff0c;在hello uni-app项目中查看 --> <template><view><view class"uni-common-mt"><view class"uni-form-item uni-column"&g…

【C++】开源:跨平台轻量日志库easyloggingpp

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍跨平台轻量日志库easyloggingpp。 无专精则不能成&#xff0c;无涉猎则不能通。。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&am…

详细介绍Matlab中线性规划算法的使用

Matlab中提供了用于线性规划的优化工具箱&#xff0c;其中包含了多种算法&#xff0c;如单纯形法、内点法等。线性规划是一种优化问题&#xff0c;旨在找到一组变量的最佳值&#xff0c;以最大化或最小化线性目标函数&#xff0c;同时满足一组线性约束条件。 下面将详细介绍Ma…

【C++11】智能指针的定义 和 种类 及 使用

智能指针 定义 为什么需要智能指针 在C中&#xff0c;动态分配内存是一项常见的任务&#xff0c;但手动管理分配和释放内存可能会导致很多问题&#xff0c;如内存泄漏、悬垂指针以及多次释放同一块内存等。为了避免这些问题&#xff0c;引入了智能指针的概念&#xff0c;它们…

(笔记)插入排序

插入排序 插入排序是一种简单且常见的排序算法&#xff0c;它通过重复将一个元素插入到已经排好序的一组元素中&#xff0c;来达到排序的目的。在插入排序算法中&#xff0c;将待排序序列分为已排序和未排序两个部分。初始时&#xff0c;已排序部分只包含一个记录&#xff0c;…

LiveGBS流媒体平台GB/T28181功能-海康NVR摄像机自带物联网卡摄像头注册GB/T28181国标平台看不到设备的时候如何抓包及排查

海康大华宇视华为等硬件NVR摄像机注册到LiveGBS国标平台看不到设备的时候如何抓包及排查 1、设备注册后查看不到1.1、是否是自带物联网卡的摄像头1.2、关闭萤石云1.3、防火墙排查1.4、端口排查1.5、IP地址排查1.6、设备TCP/IP配置排查1.7、设备多网卡排查1.8、设备接入配置参数…

Docker(四)

文章目录 1. docker其他命令补充2. docker-registry使用3. docker-hub的使用4. 企业级私有仓库harbor4.1 harbor安装4.2 harbor配置https4.3 harbor常见使用4.3.1 harbor新建项目仓库4.3.2 harbor创建用户4.3.3 harbor仓库管理4.3.4 harbor复制管理4.3.5 harbor删除镜像 5. doc…

K8S下如何搭建eureka集群

背景 传统应用上云&#xff0c;基于传统应用需要考虑上云的方案和改造成本&#xff0c;这也是传统应用上云过程中的难点&#xff0c;本篇介绍3台eureka搭建的方案。 方案一 此方案借助了K8S中Service的一些功能。 这种方案是传统方案的简单迁移版本&#xff0c;比较易于理解…

深度学习:tf.keras实现模型搭建、模型训练和预测

在sklearn中&#xff0c;模型都是现成的。tf.Keras是一个神经网络库,我们需要根据数据和标签值构建神经网络。神经网络可以发现特征与标签之间的复杂关系。神经网络是一个高度结构化的图&#xff0c;其中包含一个或多个隐藏层。每个隐藏层都包含一个或多个神经元。神经网络有多…

【微信小程序】使用iView组件库中的icons资源

要在微信小程序中使用iView组件库中的icons资源&#xff0c;需要先下载并引入iView组件库&#xff0c;并按照iView的文档进行配置和使用。 以下是一般的使用步骤&#xff1a; 下载iView组件库的源码或使用npm安装iView。 在小程序项目的app.json文件中添加iView组件库的引入配…