问题：

　　redux与react组件的代码耦合度太高

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

　　编码不够简洁

react-redux

　　1）是一个react插件库

下载：

　　npm install --save react-redux@5.0.6

　　(当前最新版本为7，6版本后的会报错)

React-Redux将所有的组件分为两类：

　　1）UI组件

　　　　　　只负责UI的成像，不带有业务逻辑

　　　　　　通过props接收数据(一般数据和函数)

　　　　　　不使用任何Redux的API

　　　　　　一般保存在components文件夹下 

　　2）容器组件

　　　　　　负责管理数据和业务逻辑，不负责UI的呈现

　　　　　　使用Redux的API

 

　　　　　　一般保存在containers文件夹下

redux项目结构：

　　结构很固定，redux文件夹下面有action-types.js、actions.js、reducers.js、store.js

相关API：

　　1）Provider

　　　　让所有组件都可以得到state数据

　　　　<Provider store={store}>

　　　　　　<APP/>

　　　　</Provider>

　　2）connect()　　//关键

　　　　用于包装UI组件生成容器组件

　　　　import { connect } from 'react-redux'

　　　　connect(

　　　　　　mapStateToprops,

　　　　　　mapDispatchToProps

　　　　)(Counter)

　　3）mapStateToprops() //它是对象

　　　　将外部的数据（即state对象）转换为UI组件的标签属性

　　　　const mapStateToprops = function (state) {

　　　　　　return {

　　　　　　　　value:state

　　　　　　}

　　　　}

　　4）mapDispatchToProps

　　　　将分发action的函数转换为UI组件的标签属性

　　　　简洁语法可以直接指定为actions对象或包含多个action方法的对象

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄