当前位置: 首页 > news >正文

react-redux

Redux

React-redux基本使用

  • 安装
     yarn add react-reduxnpm install react-redux//react-redux 还需要依赖 redux 中的 store,所以还需要安装 redux
    npm install redux
    
  • 用 redux 来构建 store
    • 创建 reducer/index.js 文件,构建reducer来响应 actions
    • 创建 store/index.js 文件,通过createStore方法,把reducer 传进来
      //store/index.jsimport  { createStore } from "redux"import { reducer } from "./reducer"export default createStore(reducer)// reducer/index.js const initState = { count:0 }export.reducer = ( state = inistate, action ) => {switch (action.type){case 'add_action':return {count: state.count + 1}default: return state;}}
    
    • 在 app.js中引入 store
  • 引入 Provider 组件
    • 在app.js 中 导入 Provider 组件
    • 利用 Provider 组件将整个结构进行包裹,并传递 store
     import { Provider } from 'react-redux'function App(){return (<Provider store={store}> ... </Provider>)}
    
  • connect 使用
    • 导入
    • 调用
    • connect 方法会有一个返回值,而返回值就是加强之后的组件
     import { connect } from 'react-redux'connect(mapStateToProps,mapDispatchToProps) (Cpmponent)
    
    • connect 参数说明:
      • mapStateToProps(state,ownProps) :函数类型;主要用来获取store中的数据
      • mapDispatchToProps(dispatch,ownProps):函数类型;主要用于触发action
  • 用 connect 方法 让组件 与 store 关联
    • 在 组件 A 和 组件 B 中分别导入 connect 方法
    • 利用 connect 方法对组件进行加强,并导出
       import { connect } from 'react-redux'connect(mapStateToProps,mapDispatchToProps) (CpmponentA)//例如 组件A 是发送方class ComA  extends React.Component{handleClick = () => {this.props.sendAction()}render(){return <button onClick={this.handleClick}> + </button>}}
      const mapDispatchToProps = dispatch => {return {sendAction: () => {dispatch({type: 'add_action'})}}
      }
      export default connect(null,mapDispatchToProps) (ComA)
      //例如 组件B 是接收方class ComB  extends React.Component{render(){return <div>{this.props.count} </div>}}
      const mapStateToProps = state => {return state}
      }
      export default connect(mapStateToProps) (ComB)
      

react-redux 原理图

在这里插入图片描述

相关文章:

react-redux

Redux 是js容器&#xff0c;用于进行全局的 状态管理它可以用在react, angular, vue等项目中, 但基本与react配合使用三大核心&#xff1a; 单一数据源 整个应用的state被存储在一棵 object tree中&#xff0c;并且这个 object tree只存在于一个唯一的 store 中 State是只读的…...

算法刷刷刷| 回溯篇| 子集问题大集合

78.子集 给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的子集&#xff08;幂集&#xff09;。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[],[1],[2],[1…...

合并两个有序数组-力扣88-java

一、题目描述给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。注意&#xff1a;最终&#xff0c;合…...

2022「大厂可观测」重磅回顾,12场直播,15位技术大咖洞见可观测

回首2022年&#xff0c;注定是意义非凡的一年。新冠疫情继续肆虐全球&#xff0c;中国疫情全面放开&#xff0c;神舟十四号与神舟十五号成功会师&#xff0c;俄乌冲突带来深远影响&#xff0c;阿根廷再次问鼎世界杯梅西圆梦&#xff0c;英国女王逝世......件件事都备受关注。 …...

CMMI-配置管理(CM)

一、概述配置管理&#xff08;Configuration Management&#xff0c; CM&#xff09;的目的在于使用配置识别、配置控制、配置状态记录与报告以及配置审计&#xff0c;来建立并维护工作产品的完整性。1、简介“配置管理”过程域涉及以下活动&#xff1a;• 识别所选工作产品的配…...

网络编程套接字Socket

一.什么是网络编程网络编程&#xff0c;指网络上的主机&#xff0c;通过不同的进程&#xff0c;以编程的方式实现网络通信&#xff08;或称为网络数据传输&#xff09;。二.为什么要实现网络编程我们通过网络编程可以在网络中获取资源&#xff0c;实质是通过网络&#xff0c;获…...

Linux进程概念(二)

进程状态1.阻塞和挂起2.R运行状态和S睡眠状态3.T停止状态4.X死亡状态和Z僵尸状态&#x1f31f;&#x1f31f;hello&#xff0c;各位读者大大们你们好呀&#x1f31f;&#x1f31f; &#x1f680;&#x1f680;系列专栏&#xff1a;【Linux的学习】 &#x1f4dd;&#x1f4dd;本…...

墨天轮【第二届数据库掌门人论坛】圆满收官 | 含嘉宾精彩观点回顾

2月10日上午&#xff0c;墨天轮【2023春季发布会暨第二届数据库掌门人论坛】盛大开启&#xff0c;本次活动的主题为“新征程&#xff0c;向未来”&#xff0c;共包含2022年度中国数据库颁奖盛典、2022年度行业发展报告发布以及第二届数据库掌门人论坛三项议程。华为云数据库服务…...

Redis之集群搭建

redis的集群模式简介&#xff1a; redis的集群模式中可以实现多个节点同时提供写操作&#xff0c;redis集群模式采用无中心结构&#xff0c;每个节点都保存数据&#xff0c;节点之间互相连接从而知道整个集群状态。 集群搭建步骤如下 (一台服务器模拟多台服务器) 1.创建6个配置…...

31-Golang中的二维数组

二维数组的使用方式 使用方式一&#xff1a;先声明/定义再赋值 1.语法&#xff1a;var数组名 [大小] [大小]类型2.比如&#xff1a;var arr [2] [3]int,再赋值 package main import ("fmt" )func main() {//定义/声明数组var arr [4][6]int//赋初值arr[1][2] 1ar…...

<<Java开发环境配置>>6-SQLyog安装教程

一.SQLyog简介: SQLyog 是一个快速而简洁的图形化管理MySQL数据库的工具&#xff0c;它能够在任何地点有效地管理你的数据库&#xff0c;由业界著名的Webyog公司出品。使用SQLyog可以快速直观地让您从世界的任何角落通过网络来维护远端的MySQL数据库。 二.SQLyog下载: 下载地址…...

MySQL 中的 distinct 和 group by 哪个效率更高

先说大致的结论&#xff08;完整结论在文末&#xff09;&#xff1a;在语义相同&#xff0c;有索引的情况下&#xff1a;group by和distinct都能使用索引&#xff0c;效率相同。在语义相同&#xff0c;无索引的情况下&#xff1a;distinct效率高于group by。原因是distinct 和 …...

计算机相关专业毕业论文选题推荐

计算机科学以下是我推荐的20个计算机科学专业的本科论文选题&#xff1a;基于机器学习的推荐算法研究与实现基于区块链技术的数字身份认证方案设计与实现基于深度学习的图像识别技术研究与应用基于虚拟现实技术的教育培训平台设计与实现基于物联网技术的智能家居系统研究与开发…...

网络编程套接字之TCP

文章目录一、TCP流套接字编程ServerSocketSocketTCP长短连接二、TCP回显服务器客户端服务器客户端并发服务器UDP与TCP一、TCP流套接字编程 我们来一起学习一下TCP socket api的使用&#xff0c;这个api与我们之前学习的IO流操作紧密相关&#xff0c;如果对IO流还不太熟悉的&am…...

网络与串口调试工具TCPCOM

TCPCOM&#xff0c;网络与串口二合一调试助手&#xff0c;将网络调试助手与串口调试助手合二为一&#xff0c;绿色软件&#xff0c;简单高效。【软件特色】 1. 支持中英文双语言&#xff0c;自动根据操作系统环境选择系统语言类型&#xff1b; 2. 支持ASCII/Hex发送,发送和接收…...

数据库常用命令

文章目录1. 数据库操作命令1.进入数据库2.查看数据库列表信息3.查看数据库中的数据表信息2.SQL语句命令1. 创建数据表2. 基本查询语句3. SQL排序4. SQL分组统计5. 分页查询6. 多表查询7.自关联查询8.子查询1. 数据库操作命令 1.进入数据库 mysql -uroot -p2.查看数据库列表信…...

PTA复习

函数 6-1 学生类的构造与析构 #include<bits/stdc.h> using namespace std; class Student {int num;string name;char sex; public:Student(int n,string nam,char s):num(n),name(nam),sex(s){cout<<"Constructor called."<<endl;}void display…...

TypeScript 学习之接口

接口&#xff1a;对值所具有的结构进行类型检查&#xff0c;称为“鸭式变型法”或“结构性子类型化” 基本使用 interface LabelledValue {label: string; }function printLabel(labelledObj: LabelledValue) {console.log(labelledObj.label); }let myObj {size: 10, label:…...

原码反码补码

在计算机中&#xff0c;负数都是以补码的形式存放的&#xff0c; 正数的原码、反码、补码完全一致。 原码&#xff1a;指的是正数的二进制或负数的二进制&#xff0c; 负数的二进制&#xff08;原码&#xff09;&#xff0c;其实就是在正数的二进制的最高位前面加一个符号位 1。…...

大数据选股智能推荐系统V1.0-1

很长时间没有发布博客了&#xff0c;这段时间个人确实有点忙。另外一方面在这段时间我也没有闲着。自己研发了一套大数据选股的智能推荐系统。废话不说&#xff0c;我们先来看这套系统&#xff1a;登录页面&#xff1a;&#xff08;技术点&#xff1a;验证码的生成&#xff09;…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

tauri项目,如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值&#xff0c;可以通过标准的依赖&#xff1a; std::env::var(name).ok() 想在前端通过调用来获取&#xff0c;可以写一个command函数&#xff1a; #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...

客户案例 | 短视频点播企业海外视频加速与成本优化:MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战 某短视频点播企业深耕国内用户市场&#xff0c;但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大&#xff0c;传统架构已较难满足当前企业发展的需求&#xff0c;企业面临着三重挑战&#xff1a; ① 业务&#xff1a;国内用户访问海外服…...

聚六亚甲基单胍盐酸盐市场深度解析:现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...

从零手写Java版本的LSM Tree (一):LSM Tree 概述

&#x1f525; 推荐一个高质量的Java LSM Tree开源项目&#xff01; https://github.com/brianxiadong/java-lsm-tree java-lsm-tree 是一个从零实现的Log-Structured Merge Tree&#xff0c;专为高并发写入场景设计。 核心亮点&#xff1a; ⚡ 极致性能&#xff1a;写入速度超…...