[修仙之路]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 (
);
}
容器组件示例：
class ShowContainer extends Component{
constructor(props)
{
super(props);
this.state={
name:"微差",
sex:"男"
};
}
render()
{
let {name,sex} = this.state;
return ;
}
}
可以看到容器组件中渲染的是显示组件,显示组件的一切数据来源于容器组件
创建容器组件
引入React-Redux中的connect函数，用它创建容器组件
创建容器组件代码如下
/*引入connect函数*/
import {connect} from "react-redux";
/*声明Show组件*/
function Show(props){
return (
);
}
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(
,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 (
);
}
/*编写映射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(
,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的映射
分类: reacthttps://www.cnblogs.com/shuitao/p/12071422.html
姓名：{props.name}
性别：{props.sex}
姓名：{props.name}
性别：{props.sex}
姓名：{props.name}
性别：{props.sex}