[修仙之路]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的映射