reduxreact-redux
redux
redux组成部分:state,action,reducer,store
store主要职责:
维持应用的state
提供getState()方法获取state
提供dispatch()方法发送action
通过subscribe()来注册监听
通过subscribe()返回值来注销监听
用法:
- action:必须要有return返回值,返回的是对象{type: ‘xx’, key: value},必须要有type属性
action/index.js组件写action的相关信息
const sendAction = () => { // 名字随意取return {type: 'send_action', // 名字随意取...//剩下的写需要传的参数value: '发送爱心~' // 调用时返回的值}
}
const stopAction = () => { // 名字随意取return {type: 'stop_action', // 名字随意取...//剩下的写需要传的参数value: '停止发送'}
}
module.exports = {sendAction,stopAction,
}
- reducer:可以写个初始值,在这边判断action的type值
reducer/index.js组件
const initState = {sendValue: '发射信息',stopValue: '停止信息',
} // 定义初始值const reducer = (state = initState, action) {switch(action.type) {case: 'send_action':return {sendValue: action.Value}case: 'stop_action':return {stopValue: action.Value}case: 'add_action':retrun {// 返回的都是新的state,那我随便取个值吧addValue: action.value}default: return state;}
}const loveReducer = (state = initState, action) {switch() {...}}
const ... = (state, action) {}
module.exports = {reducer,loveReducer,...
}
- store: 需要导入reducer
import { legacy_createStore as createStore } from 'redux';// 导入reducer
import { reducer, xxx } from '../reducer/index.js';// 构建store
export default createStore(reducer)
- 使用:在需要发送action的页面导入action,store
import React from 'react';
import store from '../../store/index.js';
import { sendAction, stopAction } from '../../action/index.js';export default class Home extends React.Component {handleClick = () => {// 发送action方式有两种:1.发送action组件内的const action = sendAction()store.dispatch(action)// 2.直接store.dispatchstore.dispath({type: 'add_action', // action的type必传// 剩下的可以传值value: 'add_action的传值,这个值会在reducer的action里'})}// 当组件加载完成的时候监听,具体用法还需百度componentDidMount(){store.subscribe(() => {// this.setState({});})}render(){return (<><button onClick="this.handleClick">点击发送action</button></>)}
}
child组件中使用add_action的value值
获取store里的属性值用store.getState()
import React from 'react';
// 需要引入store
import store from '../../store/index.js';
export default class Child extends React.Commponents {render(){return (<div>{ store.getState().addValue }</div>)}
}
react-Redux
react-Redux中两个重要的成员:
1.Provider: 这个组件能够使你整个app都能获取到store中的数据
2.connect: 这个方法能够使组件跟store来进行关联
-
Provider:
Provider包裹在根组件最外层,使所有的子组件都可以拿到State
Provider接收store作为props,然后通过context往下传递,这样react中任何组件都可以通过context获取到store -
connect:
connect:Provider内部组件如果想要使用到state中的数据,就必须要connect进行一层包裹封装,换一句话来说就是必须要被connect进行加强
connect就是方便我们组件能够获取到store中的state
react-redux使用:需要结合redux的reducer,store使用
- 需要在引入两个子组件的根组件最外层,引入store,绑定store
import React from 'react';
import srore from '../../store/index.js'; // 与上面store/index.js相同
import { Provider } from 'react-redux';
// 引入两个子组件
import ComA from '../xxx/ComA.js';
import ComB from '../xxx/ComB.js';
class Main extends React.Commpont {render(){return(<Provider store={store}><ComA /><ComB /></Provider>)}
}
- 在两个子组件中使用connect,一个发送组件一个接收组件
connect(接收函数,发送函数)(需要使用connect的组件)
ComA组件:发送action组件
import React from 'react';
// 导入connect
import { connect } from 'react-redux';
class ComA extends React.Commponent{addClick = () => {// 底下mapDispatchToProps 函数在组件内就是props,用this.props.xxx可以调用具体的actionthis.props.addAction();}recClick = () => {this.props.recAction();}render() {refturn {<><button onClick={this.addClick}>+</button><button onClick={this.recClick}>-</button></>}}
}const mapDispatchToProps = dispatch => {// 接收dispatch参数// 必须要有return 返回值,返回对象{}, 键值对形式 key: ()=>回调函数return {addAction: () => {dispath({type: 'add_action', // action必须要有type值value: '需要传递的值',})},recAction: () => {dispath({type: 'rec_action', // action必须要有type值value: '需要传递的值',})}}
}
// connect需要导出,第一个函数是接收的,这个组件不需要接收置为null,只需要第二个发送函数,名字随便取
export default connect(null, mapDispatchToProps)(ComA)
reducer/index.js组件
const initState = {count: 0
}
exports.reducer = (state, action) => {switch(action.type){case: 'add_action':return {count: state.count + 1}case: 'rec_action':return {count: state.count - 1}}
}
child组件中接收value:
import React from 'react';// 导入connect
import { connect } from 'react-redux';class ComB extends React.Commponent {render() {return(// 在组件内使用this.props获取值<div>{ this.props.count }</div>)}
}const mapStateToProps = (state) => {// 必须要returnreturn state
}
// 接收组件只需要第一个接收函数,需要导出
export default connect(mapStateToProps)(ComB)
相关文章:
reduxreact-redux
redux redux组成部分:state,action,reducer,store store主要职责: 维持应用的state 提供getState()方法获取state 提供dispatch()方法发送action 通过subscribe()来注册监听 通过subscribe()返回值来注销监听 用法: action:必须要有return返…...
go中的并发
goruntine(协程) 每一个并发的执行单元叫做一个goruntine,要编写一个并发任务,可以在函数名前加go关键字,就能使这个函数以协程的方式运行, 如:go 函数名(函数参数)、 如果函数有返回值&…...

开启EMQX的SSL模式及SSL证书生成流程
生成证书 首先:需要安装Openssl 以下是openssl命令 生成CA证书 1.openssl genrsa -out rootCA.key 2048 2.openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 3650 -subj "/CCN/STShandong/Ljinan/Oyunding/OUplatform/CNrootCA" -out ro…...
4 | Java Spark实现 WordCount
简单的 Java Spark 实现 WordCount 的教程,它将教您如何使用 Apache Spark 来统计文本文件中每个单词的出现次数。 首先,确保您已经安装了 Apache Spark 并设置了运行环境。您需要准备一个包含文本内容的文本文件,以便对其进行 WordCount 分析。 代码 package com.bigdat…...

Redis7安装
1. 使用什么系统安装redis 由于企业里面做Redis开发,99%都是Linux版的运用和安装,几乎不会涉及到Windows版,上一步的讲解只是为了知识的完整性,Windows版不作为重点,同学可以下去自己玩,企业实战就认一个版…...
Nginx vs Tomcat:一个高性能Web服务器和Java应用服务器的对决
Nginx vs Tomcat:一个高性能Web服务器和Java应用服务器的对决 Nginx和Tomcat都是常见的Web服务器解决方案,但它们在设计、适用场景以及性能方面存在一些显著差异。本文将比较这两个解决方案,并探讨它们各自的优势。 1. 设计理念 Nginx&…...

终端登录github两种方式
第一种方式 添加token,Setting->Developer Setting 第二种方式SSH 用下面命令查看远程仓库格式 git remote -v 用下面命令更改远程仓库格式 git remote set-url origin gitgithub.com:用户名/仓库名.git 然后用下面命令生成新的SSH秘钥 ssh-keygen -t ed2…...

【防火墙】防火墙NAT Server的配置
Web举例:公网用户通过NAT Server访问内部服务器 介绍公网用户通过NAT Server访问内部服务器的配置举例。 组网需求 某公司在网络边界处部署了FW作为安全网关。为了使私网Web服务器和FTP服务器能够对外提供服务,需要在FW上配置NAT Server功能。除了公网…...

《算法竞赛·快冲300题》每日一题:“简化农场”
《算法竞赛快冲300题》将于2024年出版,是《算法竞赛》的辅助练习册。 所有题目放在自建的OJ New Online Judge。 用C/C、Java、Python三种语言给出代码,以中低档题为主,适合入门、进阶。 文章目录 题目描述题解C代码Java代码Python代码 “ 简…...

【二等奖方案】大规模金融图数据中异常风险行为模式挖掘赛题「冀科数字」解题思路
第十届CCF大数据与计算智能大赛(2022 CCF BDCI)已圆满结束,大赛官方竞赛平台DataFountain(简称DF平台)正在陆续释出各赛题获奖队伍的方案思路,欢迎广大数据科学家交流讨论。 本方案为【大规模金融图数据中…...
C# List与HashSet的contains()方法查询速度比较
List 和HashSet同时查询40万条数据,谁的效率更高? //**1.下面是List底层源码**public boolean contains(Object o) {//如果查到我们想要查询的值则返回一个true,否则返回false,return indexOf(o) > 0;//这里是调用了indexOf方…...

命令执行漏洞复现攻击:识别威胁并加强安全
环境准备 这篇文章旨在用于网络安全学习,请勿进行任何非法行为,否则后果自负。 一、攻击相关介绍 原理 主要是输入验证不严格、代码逻辑错误、应用程序或系统中缺少安全机制等。攻击者可以通过构造特定的输入向应用程序或系统注入恶意代码ÿ…...
Keepalived实现服务器的高可用性
目录 背景方案简介KeepalivedHeartbeat Keepalived技术介绍Keepalived通信方式时间同步 Keepalived配置案例Keepalived日志配置Keepalived服务配置全局配置段VRRP配置段Keepalived服务启动 服务异常检测 背景 在实际应用中,为了提高服务器的高可用性,往…...

Python程序化交易接口批量获取数据源码
小编举例下面是一个简单的示例代码,展示如何使用Python的程序化交易接口批量获取数据,例如开发文档参考:MetaTradeAPI (metatradeapi) - Gitee.com 签名 int Init(); 功能 API 初始化 参数 无 返回值 授权成功的交易账户数量 返回值 &…...

【强化学习】基本概念
基本大概框架 强化学习的主要角色是 智能体 (agent)和 环境,环境是智能体存在和互动的世界。智能体根据当前的环境做出action,action影响环境。然后智能体根据新的环境再进行action。 基础用语 状态(state, s)&…...
0001__安装electron失败 postinstall: `node install.js`
不一样的 npm 快速安装electron的方案 - 简书 2、手动下载出错的文件 打开浏览器输入 下述网址, 找到你要的版本号, 点击后找到你的平台点击即可下载了。https://registry.npmmirror.com/binary.html?pathelectron/ 作者:一颗人心 链接&…...

Linux测开常用命令总结
文章目录 Linux系统中文件目录树 基本指令的使用: Linux命令的帮助信息查看 --help command --help 说明: 显示command 命令的帮助信息通过man命令查看帮助信息 man command( 命令的名称) man 命令查看的帮助信息更加详细ls,pwd,…...
xml转化为txt数据的脚本,为yolo提供训练
这里写自定义目录标题 xml转化为txt数据的脚本 xml转化为txt数据的脚本 代码如下: import xml.etree.ElementTree as ET import os, cv2 import numpy as np from os import listdir from os.path import joinclasses []def convert(size, box):dw 1. / (size[0…...
【H5页面嵌入到小程序或APP中实现手机号点击复制和拨号功能】
在H5界面嵌入到小程序和移动应用(安卓和iOS)中实现手指点击手机号弹出弹窗,包含呼叫和复制选项,是可以实现的。下面我将为你提供一个基本的示例,并解释在小程序、安卓和iOS中要做的支持工作。 <!DOCTYPE html> …...

Kubernetes技术--k8s核心技术 configMap
1.概述 configMap最主要的作用是存储一些不加密的数据到/etcd,让pod以变量或者数据卷(volume)挂载到容器。 应用场景:配置文件、存储信息等 2.使用 -1.创建配置文件。 这里我们需要先编写一个配置文件。使用redis,如下所示:...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
pam_env.so模块配置解析
在PAM(Pluggable Authentication Modules)配置中, /etc/pam.d/su 文件相关配置含义如下: 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块,负责验证用户身份&am…...

前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生,我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要,而您认真负责的教学态度,让课程的每一部分都充满了实用价值。 尤其让我…...

C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...

使用LangGraph和LangSmith构建多智能体人工智能系统
现在,通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战,比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...
django blank 与 null的区别
1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是,要注意以下几点: Django的表单验证与null无关:null参数控制的是数据库层面字段是否可以为NULL,而blank参数控制的是Django表单验证时字…...

手机平板能效生态设计指令EU 2023/1670标准解读
手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读,综合法规核心要求、最新修正及企业合规要点: 一、法规背景与目标 生效与强制时间 发布于2023年8月31日(OJ公报&…...