第43节——redux介绍

一、什么是状态管理

状态管理是指在应用中维护数据状态的过程。随着应用不断变大,维护和同步数据状态的复杂度也会变得更高,因此状态管理是一个重要的问题。

状态管理的目的是

减少状态的冗余,提高代码的可读性。

减少状态的重复,提高代码的复用性。

分离业务逻辑,降低代码的耦合度。

简化状态的同步,提高代码的可维护性。

React 本身并不提供状态管理工具,但是我们可以使用它提供的钩子,如 useState 和 useContext,结合其他状态管理工具,如 Redux 和 MobX,实现应用的状态管理。

二、redux

1、redux简介

Redux 是一种 JavaScript 库,用于管理应用的全局状态。它的目的是帮助开发者管理和同步应用中的数据状态,以实现组件间的数据共享和通信。

Redux 遵循了一种单向数据流的架构模式,将整个应用的状态数据存储在一个全局的状态树(即 store)中,并通过明确的操作,比如 dispatch 一个 action,来修改数据状态。这样可以有效地降低数据状态的耦合度,使得代码更加可维护和可读。

Redux 还支持中间件(middleware)和插件(plugins),允许开发者扩展其功能,以适应不同的业务需求。它也支持热加载(hot reloading),可以在不重启应用的情况下更新代码。

总的来说,Redux 是一个用于简化应用状态管理的工具,广泛应用在 React 和其他前端框架中。

3、react-redux

这是一个 React 的绑定库,用于将 Redux 与 React 应用程序集成。它提供了绑定 React 组件与 Redux store 的方法,并且可以帮助您更方便地使用 Redux 库管理 React 应用程序的状态

三、安装

npm install redux react-redux

四、简单例子

/**

* 由于在redux4.x 版本createStore已经被废弃

* 但是 createStore 相对来说对我们了解redux又比较重要

* 那么我们就使用legacy_createStore 这个方法

* 然后给他重命名redux 就可以正常使用createStore

* 后面我们会着重讲新版redux的用法

*

*/

1、创建store.js文件

/*** 由于在redux4.x 版本createStore已经被废弃* 但是 createStore 相对来说对我们了解redux有比较重要* 那么,我们就引入legacy_createStore 这个方法* 然后给他重命名redux 就可以正常使用createStore* 后面我们会着重讲新版redux的用法* */
import { legacy_createStore as createStore } from "redux";// 初始状态
const initialState = {count: 0,
};// Reducer 函数,处理对 state 的修改
function reducer(state = initialState, action) {switch (action.type) {case "INCREMENT":// 返回一个新的状态对象,count 加一return { ...state, count: state.count + 1 };case "DECREMENT":// 返回一个新的状态对象,count 减一return { ...state, count: state.count - 1 };default:// 默认情况下,返回原来的状态return state;}
}// 创建 store
const store = createStore(reducer);// 导出 store
export default store;

2、创建learn-redux.jsx

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';function Counter() {const count = useSelector(state => state.count);const dispatch = useDispatch();return (<div><p>Count: {count}</p><button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button><button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button></div>);
}export default Counter;

3、入口文件修改

import React from "react";
import ReactDOM from "react-dom/client";import { Provider } from "react-redux";
import LearnRedux from "./day04/learn-redux";const root = ReactDOM.createRoot(document.getElementById("root"));root.render(<Provider store={store}><LearnRedux /></Provider>
);

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

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

相关文章

AIGC 微调的方法

AIGC 的微调方法可以分为以下步骤&#xff1a; 数据准备&#xff1a;收集尽可能多的数据&#xff0c;包括输入和输出数据&#xff0c;并将其划分为训练集、验证集和测试集。 模型选择&#xff1a;选择合适的模型结构&#xff0c;例如多层感知器&#xff08;MLP&#xff09;、卷…

win+ubuntu双系统扩容挂NTFS硬盘

ubuntu下查看 win下划出分区&#xff0c;进入ubuntu&#xff0c;打开终端 df -h 新建目录&#xff0c;挂载磁盘 sudo mkdir /home/zgf/dpdata 在win下磁盘为ntfs格式&#xff0c;转为ext4 sudo mkfs.ext4 /dev/nvme1n1p5 //nvme1n1p5为挂载盘名 临时挂载sudo mount /de…

WPF 02

Grid容器 分行和分列 <Grid><Grid.RowDefinitions><!--2*&#xff1a;此行是下面一行的两倍--><RowDefinition Height"2*"/><RowDefinition/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition/>…

【AI视野·今日Robot 机器人论文速览 第四十四期】Fri, 29 Sep 2023

AI视野今日CS.Robotics 机器人学论文速览 Fri, 29 Sep 2023 Totally 38 papers &#x1f449;上期速览✈更多精彩请移步主页 Interesting: &#x1f4da;NCF,基于Neural Contact Fields神经接触场的方法实现有效的外部接触估计和插入操作。 (from FAIR ) 操作插入处理结果&am…

ESP8266使用记录(四)

放上最终效果 ESP8266&Unity游戏 整合放进了坏玩具车遥控器里 最终只使用了mpu6050的yaw数据&#xff0c;因为roll值漂移…… 使用了https://github.com/ElectronicCats/mpu6050 整个流程 ESP8266取MPU6050数据&#xff0c;处理后通过udp发送给Unity显示出来 MPU6050_Z…

TensorFlow学习1:使用官方模型进行图片分类

前言 人工智能以后会越来越发达&#xff0c;趁着现在简单学习一下。机器学习框架有很多&#xff0c;这里觉得学习谷歌的 TensorFlow&#xff0c;谷歌的技术还是很有保证的&#xff0c;另外TensorFlow 的中文文档真的很友好。 文档&#xff1a; https://tensorflow.google.cn/…

spring boot项目 mvn test 和 mvn clean install 和 mvn test-compile 识别不到测试类无法运行单元测试

测试类使用了junit4&#xff0c; spring boot 版本的test 框架自带的是junit5&#xff0c;不兼容。 按照spring boot 对应的版本的junit框架&#xff0c;修改测试类&#xff0c;比如我就修改了junit5。按照&#xff1a; https://docs.spring.io/spring-boot/docs/2.6.3/refere…

【2023年11月第四版教材】第17章《干系人管理》(第一部分)

第17章《干系人管理》&#xff08;第一部分&#xff09; 1 章节内容2 管理基础3 管理过程3.1 管理的过程★★★ &#xff08;22上44&#xff09;3.2 管理ITTO汇总★★★ 1 章节内容 【本章分值预测】大部分内容不变&#xff0c;细节有一些变化&#xff0c;预计选择题考2分&…

ORACLE Redo Log Buffer 重做日志缓冲区机制的设计

最近和朋友包括一些国产数据库的研发人员交流&#xff0c;很多程序员认为 Oracle 已经过时&#xff0c;开源数据库或者他们研发的国产数据库才代表数据库发展的未来。甚至在很多交流会议上拿出自家产品的某一个功能点和 Oracle 对比就觉得已经遥遥领先。 实际上数据库系统的发展…

go基础语法10问

1.recover的执行时机 无&#xff0c;recover 必须在 defer 函数中运行。recover 捕获的是祖父级调用时的异常&#xff0c;直接调用时无效。 func main() {recover()panic(1) }直接 defer 调用也是无效。 func main() {defer recover()panic(1) }defer 调用时多层嵌套依然无效…

10、页面结构分析

10、页面结构分析 元素名描述header标题头部区域的内容&#xff08;用于页面或页面中的一块区域&#xff09;footer标记脚部区域的内容&#xff08;用于整个页面或页面的一块区域&#xff09;sectionWeb页面中的一块独立区域article独立的文章内容aside相关内容或应用&#xf…

JVM机制理解与调优方案

作者&#xff1a;逍遥Sean 简介&#xff1a;一个主修Java的Web网站\游戏服务器后端开发者 主页&#xff1a;https://blog.csdn.net/Ureliable 觉得博主文章不错的话&#xff0c;可以三连支持一下~ 如有需要我的支持&#xff0c;请私信或评论留言&#xff01; 前言 很多Java开发…

电脑WIFI突然消失

文章目录 1. 现象2. 解决办法1&#xff1a;重新启用无线网卡设置3. 解决办法2&#xff1a;更新无线网卡驱动4. 解决办法3&#xff1a;释放静电5. 解决办法4&#xff1a;拆机并重新插拔无线网卡 1. 现象 如下图&#xff1a;电脑在使用过程中WIFI消失 设备管理器中的无线网卡驱…

【深度学习实验】卷积神经网络(六):自定义卷积神经网络模型(VGG)实现图片多分类任务

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 三、实验内容 0. 导入必要的工具包 1. 构建数据集&#xff08;CIFAR10Dataset&#xff09; a. read_csv_labels&#xff08;&#xff09; b. CIFAR10Dataset 2. 构建模型&#xff08;FeedForward&…

解决内网拉取企微会话存档代理问题的一种办法

问题&#xff1a;客户的服务都是内网的&#xff0c;不能直接访问外网&#xff1b;访问外网的话需要走kong网关才能出去。 会话存档官网说可以使用socket5、http方式拉取会话存档&#xff1b;我这边尝试了直接使用kong网关的ip和端口配置进去&#xff0c;是访问不了的 我后面就…

<C++> 哈希表模拟实现STL_unordered_set/map

哈希表模板参数的控制 首先需要明确的是&#xff0c;unordered_set是K模型的容器&#xff0c;而unordered_map是KV模型的容器。 要想只用一份哈希表代码同时封装出K模型和KV模型的容器&#xff0c;我们必定要对哈希表的模板参数进行控制。 为了与原哈希表的模板参数进行区分…

开源layui前端框架 收款码生成系统源码 多合一收款码生成源码 带50多套UI模板

Layui前端的多合一收款码在线生成系统源码_附多套前端UI模板。 卡特三合一收款码生成系统源码&#xff0c;和收款啦采用一样的原理。 内部多达50多套模板&#xff0c;前端跟付款界面都特别好看。 识别收款码之后会自动加密&#xff0c;非常安全。 一样没有后台&#xff0c;一样…

spring6-实现简易版IOC容器

手写简易版IOC容器 1、回顾Java反射2、实现Spring的IoC 我们都知道&#xff0c;Spring框架的IOC是基于Java反射机制实现的&#xff0c;下面我们先回顾一下java反射。 1、回顾Java反射 Java反射机制是在运行状态中&#xff0c;对于任意一个类&#xff0c;都能够知道这个类的所…

机器人过程自动化(RPA)入门 9. 管理和维护代码

仅仅创建一个自动化项目是不够的。无论是决定使用哪种布局,还是正确命名步骤,以正确的方式组织项目都很重要。项目也可以在新的项目中重用,这对用户来说非常方便。本章解释了我们可以重用项目的方法。我们还将学习配置技术并看到一个示例。最后,我们将学习如何集成TFS服务器…

如何两个不同的脚本文件之间传递参数

两个不同的Shell脚本之间如何访问传递的参数取决于它们是如何调用的。如果一个Shell脚本1调用另一个Shell脚本2并且想要将参数传递给被调用的脚本2&#xff0c;可以使用以下方法&#xff1a; 方法1&#xff1a;通过位置参数传递参数 这是一种常见的方法&#xff0c;其中一个脚…