Redux 数据仓库

Redux 数据仓库

解决React 数据管理（状态管理） ，用于中大型，数据比较庞大，组件之间数据交互多的情况下使用。

作者：如果你不知道是否需要使用Redux,那么你就不需要它！

解决组件的数据通信。

解决书和交互 较多的应用。

关键点：

Store: 数据仓库，保存数据的地方。

State :state 是一个对象，数据仓库里的所有数据都放到1个state里。

Action : 1 个动作， 触发数据改变的方法。

Dispatch : 将动作触发成方法

Reducer ：是一个函数，通过获取动作，改变数据，生成一个新state. 从而改变页面。

案例： 点击加减事件，控制仓库的数据变化

第一种 1. 安装 ： redux

npm install redux --save

2. 引入

// 引入仓库和 解构创建仓库的方法import Redux , {creatStore, createStore}  from 'redux' 
这个例子只用了这一个 createStore

3. 根据业务逻辑创建函数

// 2. 创建函数  通过动作 用于创建新的state   参数：传入需要修改的数据 和方法 (形参)
const reducer = function(state = { num: 0 }, action ){switch(action.type){case "add_" :state.num++;break;case "decrement_" :state.num--;break;default:break;}return {...state} // 解构，每次生成新的数据 返回
}

4. 创建仓库 把业务函数放入仓库

const store = createStore(reducer) //1. 创建仓库  放置要给函数，专门用于管理状态

5 两个点击事件

function add(){//通过仓库的方法 dispatch 进行修改数据store.dispatch({type:"add_" ,name:'lyx'}) //传递数据到第二步 创建的函数中 ->action中console.log(store.getState());}function decrement(){//通过仓库的方法 dispatch 进行修改数据store.dispatch({type:"decrement_"})console.log(store.getState());
}

6 使用仓库数据的面板 组件

  const Counter  = function(props){return (<div><h1>计数数量：{ store.getState().num }</h1><button onClick = {add}>计数++</button><button onClick = {decrement }>计数--</button></div>)}
  1. 数据修改后，监听 和渲染页面
store.subscribe(()=>{//监听数据变化 重新渲染  react时单向数据流ReactDOM.render( <App></App> ,document.getElementById('root'));
})

完整代码

App.js

import React from 'react';
// import ReactDOM from 'react-dom';// 引入仓库和 解构创建仓库的方法
import Redux , {creatStore, createStore}  from 'redux' // 2. 创建函数  通过动作 用于创建新的state   参数：传入需要修改的数据 和方法 (形参)
const reducer = function(state = { num: 0 }, action ){
console.log(action);switch(action.type){case "add_" :state.num++;break;case "decrement_" :state.num--;break;default:break;}return {...state} // 解构，每次生成新的数据 返回
}const store = createStore(reducer) //1. 创建仓库  放置要给函数，专门用于管理状态function add(){//通过仓库的方法 dispatch 进行修改数据store.dispatch({type:"add_" ,name:'lyx'}) //传递数据到第二步 创建的函数中 ->action中console.log(store.getState());}function decrement(){//通过仓库的方法 dispatch 进行修改数据store.dispatch({type:"decrement_"})console.log(store.getState());
}// 函数式的计数器const Counter  = function(props){return (<div><h1>计数数量：{ store.getState().num }</h1><button onClick = {add}>计数++</button><button onClick = {decrement }>计数--</button></div>)}class App extends React.Component {render(){return(   <div id = 'app'>    我是 app组件<Counter></Counter></div>)
}}export {App ,store
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Redux , {creatStore, createStore}  from 'redux' import {App ,store } from './App';ReactDOM.render( <App></App> ,document.getElementById('root'));store.subscribe(()=>{//监听数据变化 重新渲染  react时单向数据流ReactDOM.render( <App></App> ,document.getElementById('root'));
})

第二种 react-redux

概念：

Provider组件： 自动将store里的state和组件进行关联。

MapStatetoProps： 这个函数用于将store的state映射到组件的 props

mapdispatchToProps： 将store中的dispatch 映射到组件的props里，实现了方法的共享。

Connect 方法： 将组件和数据（方法）进行连接。

案例： 和上一个 一样

1 引入包

npm install react-redux --save

2 引入方法

import  {createStore}  from 'redux' import  {Provider, connect }  from 'react-redux'

关键点把握

createStore

  function reducer(state={num:0},action){switch(action.type){case "add":state.num++;break;default:break}return {...state}}const store = createStore(reducer)

Provider（ n. 供应者；养家者） 自动将store里的state和组件进行关联。

   ReactDOM.render(<Provider store= {store}><App></App></Provider>,document.getElementById('root'))

connect 将组件和数据（方法）进行连接。

 const App = connect(mapStateToProps,mapDispatchToProps
)(Counter)

3 数据的获取，数据的修改

要state映射到组件的props中，将修改数据的方法映射到组件的props中。

两个映射函数

//将state映射到props函数
function mapStateToProps(state){return{value:state.num}
}//将修改state数据的方法，映射到props  默认会传入store里的dispath方法
function mapDispatchToProps(dispatch){return{onAddClick:()=>{dispatch(addAction)}}
}

4 形成新的组件

// 将上面2个方法，将数据仓库的state和修改states的方法映射到组件上，形成新的组件。const App = connect(mapStateToProps,mapDispatchToProps
)(Counter)

5 原组件获得方法和属性值

class Counter extends React.Component{render(){//计数，通过stroe的state传给props,直接通过props就可以将state的数据获取const value = this.props.valueconst onAddClick = this.props.onAddClick;// 等同于vuex的 mapMutation mapStatereturn(<div><h1>技术的数量：{value}</h1><button onClick = {onAddClick}> 数字+1</button></div>)}
}

完整代码 index.js

import React from 'react';
import ReactDOM from 'react-dom';import  {createStore}  from 'redux' 
import  {Provider, connect }  from 'react-redux' 
// Provider  渲染标签class Counter extends React.Component{render(){console.log(this);//计数，通过stroe的state传给props,直接通过props就可以将state的数据获取const value = this.props.valueconst onAddClick = this.props.onAddClick;// 等同于vuex的 mapMutation mapStatereturn(<div><h1>技术的数量：{value}</h1><button onClick = {onAddClick}> 数字+1</button></div>)}
}const addAction = {type:"add"}function reducer(state={num:0},action){switch(action.type){case "add":state.num++;break;default:break}return {...state}}const store = createStore(reducer)//将state映射到props函数
function mapStateToProps(state){return{value:state.num}
}//将修改state数据的方法，映射到props  默认会传入store里的dispath方法
function mapDispatchToProps(dispatch){return{onAddClick:()=>{dispatch(addAction)}}
}// 将上面2个方法，将数据仓库的state和修改states的方法映射到组件上，形成新的组件。const App = connect(mapStateToProps,mapDispatchToProps
)(Counter)// ReactDOM.render( <App></App> ,document.getElementById('root'));ReactDOM.render(<Provider store= {store}><App></App></Provider>,document.getElementById('root'))

稍作注释：

import React from 'react';
import ReactDOM from 'react-dom';import  {createStore}  from 'redux' 
import  {Provider, connect }  from 'react-redux' 
// Provider  渲染标签// 第一步： 构建类组件   目的： 可以使用类组件的props
class Counter extends React.Component{render(){console.log(this);//计数，通过stroe的state传给props,直接通过props就可以将state的数据获取const value = this.props.valueconst onAddClick = this.props.onAddClick;// 等同于vuex的 mapMutation mapStatereturn(<div><h1>技术的数量：{value}</h1><button onClick = {onAddClick}> 数字+1</button></div>)}
}// 第二步： 构建业务逻辑  初始化仓库function reducer(state={num:0},action){switch(action.type){case "add":state.num++;break;default:break}return {...state}}const store = createStore(reducer)//将state映射到props函数
function mapStateToProps(state){return{value:state.num}
}const addAction = {type:"add"
}//将修改state数据的方法，映射到props  默认会传入store里的dispath方法
function mapDispatchToProps(dispatch){return{onAddClick:()=>{dispatch(addAction)}}
}// 将上面2个方法，将数据仓库的state和修改states的方法映射到组件上，形成新的组件。const App = connect(mapStateToProps,mapDispatchToProps
)(Counter)// ReactDOM.render( <App></App> ,document.getElementById('root'));// Provider 自动将store里的state和组件进行关联。ReactDOM.render(<Provider store= {store}><App></App></Provider>,document.getElementById('root'))

本节结束

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

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

相关文章

ESB优势2019-架构师（六十二）

ESB优势2019-架构师（六十二）

分布式数据数据库系统除了包含集中式数据库系统的模式结构外&#xff0c;还增加了几个模式级别&#xff0c;其中&#xff08;&#xff09;定义了分布式数据库中数据的整体逻辑结构、使得数据使用方便&#xff0c;如同没有分布一样。 分片模式全局外模式分布模式全局概念模式 …
阅读更多...
VisualStudio[WPF/.NET]基于CommunityToolkit.Mvvm架构开发

VisualStudio[WPF/.NET]基于CommunityToolkit.Mvvm架构开发

一、创建 "WPF应用程序" 新项目 项目模板选择如下&#xff1a; 暂时随机填一个目标框架&#xff0c;待会改&#xff1a; 二、修改“目标框架” 双击“解决方案资源管理器”中<项目>CU-APP, 打开<项目工程文件>CU-APP.csproj, 修改目标框架TargetFramew…
阅读更多...
跳跃游戏(动态规划)

跳跃游戏(动态规划)

给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输…
阅读更多...
企业出海：深入测评华为云云连接

企业出海：深入测评华为云云连接

随着全球化不断发展&#xff0c;中国企业也不断向海外拓展业务&#xff0c;然而出海企业面临不同以往的困难和挑战&#xff0c;在其中不可避免面临的跨境网络时延问题&#xff0c;如何选择区域进行部署企业业务&#xff0c;减少时延问题也成为需要重点考虑的问题。九河云结合测…
阅读更多...
YModem协议总结

YModem协议总结

《YModem协议总结》 目录 第1章 YModem协议简介 4 1.1 基本介绍 4 1.2 YModem基本介绍 4 第2章 YModem传输协议 5 2.1 起始帧的数据格式 5 2.2 数据帧的数据格式 5 2.3 结束帧数据结构 6 2.4 文件传输过程 6 2.5 CRC的计算 7 附录A 附录 8 A.1 附录 8 第1章 YModem协议简…
阅读更多...
【嵌入式项目应用】__cJSON在单片机的使用

【嵌入式项目应用】__cJSON在单片机的使用

目录 前言 一、JSON和cJson 二、cJSON是如何表示JSON数据的 三、如何封装完整的JSON数据 1. 先将串口打通&#xff0c;方便电脑查看log日志。 2. 增加cjson.c文件&#xff0c;已经在main.c中 3. 准备打包如下的JSON包 4. 代码部分&#xff0c;先将几个部分初始化指针 …
阅读更多...
web - Tomcat服务器

web - Tomcat服务器

文章目录 目录 文章目录 前言 一 . CS和BS的异同 二 . 什么是Tomcat 二 . Tomcat安装 四 . Tomcat目录结构 bin目录: 用于存放二进制的可执行文件 config目录 server.xml&#xff1a;配置整个服务器信息。例如修改端口号。默认HTTP请求的端口号是&#xff1a;8080 lib目录 log…
阅读更多...
VSCode 开发 Vue 语法提示

VSCode 开发 Vue 语法提示

一. 打开应用商店&#xff0c;搜索 vetur &#xff0c;选择第一个&#xff0c;点击安装。 二. 安装完成后&#xff0c;还可以下载 Vue Language Features 解决代码警告的问题。 最后重启 VSCode 就可以使用啦。另外输入 按回车键还可以自动生成 vue 代码格式哦。 原创作者&…
阅读更多...
【机器学习】KNN算法-鸢尾花种类预测

【机器学习】KNN算法-鸢尾花种类预测

KNN算法-鸢尾花种类预测 文章目录 KNN算法-鸢尾花种类预测1. 数据集介绍2. KNN优缺点&#xff1a; K最近邻&#xff08;K-Nearest Neighbors&#xff0c;KNN&#xff09;算法是一种用于模式识别和分类的简单但强大的机器学习算法。它的工作原理非常直观&#xff1a;给定一个新数…
阅读更多...
HTTP请求参数的区别-- Body、Query、Params的区别

HTTP请求参数的区别-- Body、Query、Params的区别

在路由中&#xff0c;参数可以通过不同的方式传递&#xff0c;包括body、query和params。这些参数在使用时有一些区别&#xff1a; Body参数&#xff1a;Body参数是通过请求的主体部分传递的数据。通常用于传递较大的数据&#xff0c;例如JSON或XML格式的数据。在HTTP请求中&am…
阅读更多...
【20年VIO梳理】

【20年VIO梳理】

19-20年VIO 梳理 1. 开源代码介绍&#xff1a; DSM2. FMD Stereo SLAM&#xff1a;融合MVG和直接方法&#xff0c;实现准确&#xff0c;快速的双目SLAM3. 基于VINS-Mono开发的SPVIS4. 改进&#xff1a;一种基于光流的动态环境移动机器人定位方案5. PVIO:基于先验平面约束的高效…
阅读更多...
网络流探索：解决网络最大流问题的算法集锦

网络流探索：解决网络最大流问题的算法集锦

1.初识网络流 网络流一直是初学者心中很难过去的一道坎&#xff0c;很多人说它是一个不像DFS/BFS那么直观的算法&#xff0c;同时网上也有各种参差不齐的材料&#xff0c;让人感到一知半解。 如果你也有这样的感觉&#xff0c;那么不要灰心&#xff0c;坚持住&#xff0c;因为…
阅读更多...
flutter doctor检测过程中出现网络超时的问题

flutter doctor检测过程中出现网络超时的问题

flutter安装过程中遇到的问题时&#xff1a; Network resources X A network error occurred while checking "https://maven.google.com/": An HTTP error occurred while checking "https://github.com/": 网络超时 打开flutter根目录 1. 找到配置…
阅读更多...
linux音频-IIS音频接口

linux音频-IIS音频接口

IIS 总线 IIS(Integrate Interface of Sound)即集成音频接口&#xff0c;在上个世纪 80 年代首先被 Philips 公司用于消费产品的音频设备&#xff0c; I2S规范 I2S总线只能用来处理audio data&#xff0c;而别的信号比如控制信号&#xff0c;编码信号则交给别的模块处理。为了…
阅读更多...
【攻克】抓包工具：中文版Fiddler使用 教程-攻克获取微信账单

【攻克】抓包工具：中文版Fiddler使用 教程-攻克获取微信账单

Fiddler是一款免费网络代理调试工具。 Fiddler是一个蛮好用的抓包工具&#xff0c;可以将网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作。也可以用来检测网络安全。反正好处多多&#xff0c;举之不尽呀&#xff01; 当年学习的时候也蛮费劲&#xff0c;一些蛮…
阅读更多...
数据清洗与规范化详解

数据清洗与规范化详解

数据处理流程&#xff0c;也称数据处理管道&#xff0c;是将原始数据转化为有意义的信息和知识的一系列操作步骤。它包括数据采集、清洗、转换、分析和可视化等环节&#xff0c;旨在提供有用的见解和决策支持。在数据可视化中数据处理是可视化展示前非常重要的一步&#xff0c;…
阅读更多...
对电磁兼容(EMC)的故障分析和判断方法简述

对电磁兼容(EMC)的故障分析和判断方法简述

1. RE&#xff1a;辐射发射&#xff08;RE&#xff09;&#xff08;100k&#xff5e;2.7G)&#xff1a;电磁兼容&#xff08;EMC&#xff09;测试辐射杂散发射 &#xff1a;从骚扰发生源或者接口设备产生电磁发射波、随机的宽带的、由空间传播、测量的工作频率外的辐射干扰 2 …
阅读更多...
【学习笔记】[ARC156E] Non-Adjacent Matching

【学习笔记】[ARC156E] Non-Adjacent Matching

首先&#xff0c;记 S ∑ X i S\sum X_i S∑Xi​&#xff0c;那么恰好有 S 2 \frac{S}{2} 2S​条边&#xff08; S S S为偶数&#xff09;&#xff1b;序列 { X i } \{X_i\} {Xi​}合法的充要条件是&#xff1a; 对于任意 i i i&#xff0c;满足 X i X i 1 ≤ S 2 X_iX_{i1…
阅读更多...
上市公司-托宾Q值数据集（2000-2022年）

上市公司-托宾Q值数据集（2000-2022年）

本文数据为上市公司-托宾Q值数据。托宾Q值是由托宾&#xff08;James Tobin&#xff09;提出的一个指标&#xff0c;用以测量公司的投资机会与市场对其估值的比较。理论上&#xff0c;如果托宾Q值大于1&#xff0c;那么公司的市场价值超过了它的资产价值&#xff0c;这意味着公…
阅读更多...
信息科技如何做好风险管理

信息科技如何做好风险管理

文章目录 前言介绍亮点结构读者对象 前言 信息科技对金融业务发展所起的作用是举足轻重的。 近年来&#xff0c;金融机构在战略规划中相继引入科技引领的概念。作为金融机构信息科技从业人员&#xff0c;我们笃信信息科技是一个非常有用的工具&#xff0c;一个兼具产品思维和管…
阅读更多...
最新文章

Copyright @ 2022~2023