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

概念铺垫

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

  ，容器组件就像我开头铺垫的一样，在页面使用容器组件，实际渲染的是显示组件。

创建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);

action.type

使用Provider使组件得到全局数据

Provider

store

Provider

store

Provider

• 引入

  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的映射