[修仙之路]React-Redux 金丹篇
作者:水涛
追求技术,但又不失生活的乐趣,过自己想要的生活
React-Redux简介
React-Redux可以使你的React项目拥有全局数据,可以使多个React组件读取到全局数据并且组件中也可修改它。
React-Redux你可以理解为Vue中的Vuex,也是一种全局状态(不懂Vue的这条略过)。
React-Redux由store、action构建函数、reducer组成。store负责维护全局状态,action构建函数负责创建action对象,reducer处理action对象并更新store。
React-Redux安装
打开vscode终端中输入:npm install --save--dev react-redux redux
回车即可下载安装
本文中的ReactRedux版本信息如下
React-Redux版本为:7.1.3
Redux版本为:4.0.4
概念铺垫
React中的组件分为两种:
- 显示组件:只显示数据,没有业务逻辑。
- 容器组件:有state状态,有业务逻辑。
显示组件示例:
function Show(props){
return (
<div>
<div>姓名:{props.name}</div>
<div>性别:{props.sex}</div>
</div>
);
}
容器组件示例:
class ShowContainer extends Component{
constructor(props)
{
super(props);
this.state={
name:"微差",
sex:"男"
};
}
render()
{
let {name,sex} = this.state;
return <Show name={name} sex={sex}/>;
}
}
可以看到容器组件中渲染的是显示组件,显示组件的一切数据来源于容器组件
创建容器组件
- 引入
React-Redux
中的connect
函数,用它创建容器组件
创建容器组件代码如下
/*引入connect函数*/
import {connect} from "react-redux";
/*声明Show组件*/
function Show(props){
return (
<div>
<div>姓名:{props.name}</div>
<div>性别:{props.sex}</div>
</div>
);
}
function mapStateToProps(state){
if (typeof state == "undefined") return { name: "", sex: "" };
return {
name:state.name,
sex:state.sex
};
}
/*action构造函数*/
function onChangeName(data){
return {
type:"NAME",
data:data
};
}
function mapDispatchToProps(dispatch){
return{
onChangeName:(data)=>{dispatch(onChangeName(data));}
};
}
/*创建容器组件*/
let Container = connect(mapStateToProps,mapDispatchToProps)(Show);
代码解析:
- 从
React-Redux
中引入connect
函数。 - 声明函数组件
Show
——用于展示数据。 - 编写
mapStateToProps
函数:参数是容器组件的state
对象,用于将容器组件(在例子中是Container)的state
对象值映射到对应显示组件(在例子中是Show组件)的props
属性上,因此后续Show
组件可以通过props.name
直接获取到容器组件的state.name
。 - 编写
onChangeName
函数:创建action
对象,action
对象中必须存在type
属性,否则报错。 - 编写
mapDispatchToProps
函数:函数的第一个参数是dispatch
函数,mapDispatchToProps
函数返回一个对象,对象的每一个属性都是一个函数,函数最终调用了dispatch
方法,dispatch
方法中传入action
对象,当调用dispatch
时会触发store
中的reducer
函数,对store
进行更新。 - 调用
connect
生成容器组件:使用connect
函数,传入mapStateToProps
与mapDispatchToProps
函数作为参数,此时会返回一个函数,继续将Show
组件传入,最终生成了一个Show
组件的容器组件,此时,这个容器组件的state
将会按照mapStateToProps
函数的映射方式与Show
组件的props
进行一一对应,并且props
中拥有mapDispatchToProps
中映射的函数,可以在Show
组件中调用以更新store
,容器组件就像我开头铺垫的一样,在页面使用容器组件,实际渲染的是显示组件。
到这一步,我们已经生成了容器组件,并且能够在显示组件中显示容器组件的state数据,并且能够修改store。那么问题来了,容器组件的state用什么设置呢?怎么创建store啊?下面,666了。
创建store
- 引入
redux
中的createStore
函数,通过它创建store
createStore
需要一个函数作为参数,这个参数就是reducer,reducer就是一个函数
创建store对象代码如下:
/*引入createStore*/
import {createStore} from "redux";
/*声明一个reducer函数,并设置state的默认值*/
const reducer = function(state={name:"",sex:""},action){
switch(action.type)
{
case"NAME":
return {name:action.data};
break;
case"SEX":
return {age:action.data};
break;
}
};
/*创建store对象*/
let store = createStore(reducer);
reducer函数的第一个参数可以设置全局state对象的默认值,第二个参数就是action构建函数返回的对象了,reducer根据
action.type
做出不同的操作,最终返回的对象会与当前全局state进行合并,从而达到更新store的效果
使用Provider使组件得到全局数据
Provider
组件会让所有被它包裹的子孙容器组件拿到它的store属性中的state作为本身的state对象,因此只需要创建store
并传给Provider
的store
属性,让Provider
作为父元素包裹容器组件就OK了,容器组件的state就有了。
- 引入
React-Redux
中的Provider
组件 - 创建
store
- 将
store
作为Provider
组件的store
属性传入 - 把容器组件包裹在
Provider
下,容器组件的state
便得到了store中的数据,并且映射给了显示组件,显示组件就可以显示全局数据了,显示组件中调用mapDispatchToProps
中映射的方法便可修改全局数据
import {Provider} from "react-redux";
import {createStore} from "redux";
/*编写reducer*/
const reducer=(state={name:"微差",sex:"男"},action)=>{
switch(action.type)
{
case"NAME":
return {name:action.data};
break;
case"SEX":
return {sex:action.data};
break;
}
};
/*创建store*/
let store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>
<Container/>
</Provider>
,document.getElementById("root"));
最终DEMO
/*引入必要函数*/
import {connect,Provider} from "react-redux";
import {createStore} from "redux";
import {render} from "react-dom";
/*声明显示组件*/
function Show(props){
/*调用onChangeName修改全局数据*/
function change(){
props.onChangeName("change");
}
return (
<div>
<div>姓名:{props.name}</div>
<div>性别:{props.sex}</div>
<input value="改变名称" type="button" onClick={change} ></input>
</div>
);
}
/*编写映射props函数*/
function mapStateToProps(state){
if (typeof state == "undefined") return { name: "", sex: "" };
return {
name:state.name,
sex:state.sex
};
};
/*action构造函数*/
function onChangeName(data){
return {
type:"NAME",
data:data
};
};
/*编写映射dispatch函数*/
function mapDispatchToProps(dispatch){
return{
onChangeName:(data)=>{dispatch(onChangeName(data));}
};
};
/*创建容器组件*/
let Container = connect(mapStateToProps,mapDispatchToProps)(Show);
/*声明一个reducer函数,并设置state的默认值*/
const reducer = function(state={name:"",sex:""},action){
switch(action.type)
{
case"NAME":
return {name:action.data};
break;
case"SEX":
return {sex:action.data};
break;
}
};
/*创建store对象*/
let store = createStore(reducer);
render(<Provider store={store}>
<Container/>
</Provider>,document.getElementById("root"));
运行一下看看,点击按钮,将改变名称
到这里,一个最简单的原理性的Demo就完成了。
- Container容器组件通过
connect(mapStateToProps,mapDispatchToProps)(Show)
方法生成。 - Container组件会渲染Show组件。
- Show组件的props属性与Container组件的state的映射关系由mapStateToProps与mapDispatchToProps配置。
- 通过
createStore
创建store
——createStore(reducer)
- 设置Provider的
store
,并将Container放置在Provider元素下,Container便能得到Provider中的store作为自己的state,完成映射,因此,connect中配置的映射也可以理解为与store的映射
[修仙之路]React-Redux 金丹篇的更多相关文章
- 程序猿修仙之路--数据结构之你是否真的懂数组? c#socket TCP同步网络通信 用lambda表达式树替代反射 ASP.NET MVC如何做一个简单的非法登录拦截
程序猿修仙之路--数据结构之你是否真的懂数组? 数据结构 但凡IT江湖侠士,算法与数据结构为必修之课.早有前辈已经明确指出:程序=算法+数据结构 .要想在之后的江湖历练中通关,数据结构必不可少. ...
- 《带你装B,带你飞》pytest修仙之路5 - yield操作
1. 简介 上一篇中,我们刚刚实现了在每个用例之前执行初始化操作,那么用例执行完之后如需要清除数据(或还原)操作,可以使用 yield 来实现.fixture通过scope参数控制setup级别,既然 ...
- 运维(SA)修仙 之路
运维(SA)修仙 之路: 大纲: 系统 ,网络 ,数据库,开发 系统 :linux(cent OS && ubuntu) 网络 :路由,防火墙,安全 数据库:mysql, mong ...
- 《带你装B,带你飞》pytest修仙之路3 - setup/teardown
1. 简介 学过unittest的都知道里面用前置和后置setup和teardown非常好用,在每次用例开始前和结束后都去执行一次.当然还有更高级一点的setupClass和teardownClass ...
- LazyCoder修仙之路
本人不才,没有高文凭,茹果本人的修仙[开发]之路能 ,走的很远,后来的人能看的上我 作品,有不足,和不对,帮帮我完善和理解.这也是我 学习笔记把!
- oo修仙之路
写在前面: 之前听说过oo这门课的威力,计院全体修仙现场的图也被转了不知多少遍,然而自己不亲身经历就不知这门课的难度所在.每次debug时耳边总会想起三国杀里面周瑜的话"挣扎吧,在血和暗的深 ...
- 程序员修仙之路--优雅快速的统计千万级别uv(留言送书)
菜菜,咱们网站现在有多少PV和UV了? Y总,咱们没有统计pv和uv的系统,预估大约有一千万uv吧 写一个统计uv和pv的系统吧 网上有现成的,直接接入一个不行吗? 别人的不太放心,毕竟自己写的,自己 ...
- 程序员修仙之路- CXO让我做一个计算器!!
菜菜呀,个税最近改革了,我得重新计算你的工资呀,我需要个计算器,你开发一个吧 CEO,CTO,CFO于一身的CXO X总,咱不会买一个吗? 菜菜 那不得花钱吗,一块钱也是钱呀··这个计算器支持加减乘除 ...
- Angular 4+ 修仙之路
Angular 4.x 快速入门 Angular 4 快速入门 涉及 Angular 简介.环境搭建.插件表达式.自定义组件.表单模块.Http 模块等 Angular 4 基础教程 涉及 Angul ...
随机推荐
- iOS UIKit x Android Widget
Android的事件回调Listener相当于iOS的delegate回调. Android的事件回调接口Listener相当于iOS的protocol回调协议. Android的UI容器(Adapt ...
- kali下安装mobsf
1.查看kali版本,安装mobsf对kali版本的要求是大于3.0并且是64位 uname -a 2.安装docker,有选择的地方直接回车就好 apt-get install docker doc ...
- Java 数据类型、变量
Java 数据类型 在 Java 中,对于每一种数据都定义了明确的具体的数据类型,在内存中分配了不同大小的内存空间. 整数类型 (byte.short.int.long) 1.Java 各整数类型 ...
- 剖析nsq消息队列目录
剖析nsq消息队列(一) 简介及去中心化实现原理 剖析nsq消息队列(二) 去中心化源码解析 剖析nsq消息队列(三) 消息传输的可靠性和持久化[一] 剖析nsq消息队列(三) 消息传输的可靠性和持久 ...
- pdf 在线预览之 vue-pdf插件
vue-pdf 支持到ie11npm安装:npm install --save vue-pdf 组件template: <div class="show-pdf"> ...
- 2019-10-30:渗透测试,基础学习,mssql堆叠内联注入,mongodb基础语法
使用xp_cmdshell需要堆叠注入,http://192.168.190.148/less-1.asp?id=1';EXEC sp_configure 'show advanced options ...
- Anaconda中启动Python时的错误:UnicodeDecodeError: 'gbk' codec can't decode byte 0xaf in position 553
今天,在Anaconda prompt启动python遇到了如下错误: UnicodeDecodeError: ‘gbk’ codec can’t decode byte 0xaf in positi ...
- scrapy的CrawlSpider类
了解CrawlSpider 踏实爬取一般网站的常用spider,其中定义了一些规则(rule)来提供跟进link的方便机制,也许该spider不适合你的目标网站,但是对于大多数情况是可以使用的.因此, ...
- Linux(CentOS7)修改默认yum源为国内的阿里云、网易yum源
修改方式: echo 备份当前的yum源 mv /etc/yum.repos.d /etc/yum.repos.d.backup4comex echo 新建空的yum源设置目录 mkdir /etc/ ...
- Centos 6.x Openssh 升级 7.7p1 版本
OpenSSH 升级 目前在一家金融公司上班,正好赶上金融公司各种暴雷,本人心里慌慌的. 然后就是金融公司要进行的最低的三级等保评测,各种修改系统安全,密码强度.WAF.防火墙等各种. 评测公司对我司 ...