‌Redux‌纯JavaScript状态管理库不绑定任何UI框架可在React、Vue、Angular甚至原生JS项目中使用只负责全局状态的集中存储、更新规则定义不处理视图层的渲染同步逻辑。‌React-Redux‌专门为React生态设计的绑定工具完全依赖React的Context机制实现store的全局传递只服务于React项目核心作用是打通Redux状态与React组件的自动渲染链路。连接容器组件和UI组件1、根据上期文章的代码进行改造成UI组件import { React{ Component } } from react export default class Count extends Component { state { car:0 } increment () { const { value } this.selectNumber } decrement () { const { value } this.selectNumber } incrementIfOdd () { const { value } this.selectNumber } incrementAsync () { const { value } this.selectNumber } render( div h1当前求和为/h1 select ref{ c this.selectNumber c } option value11/option option value22/option option value33/option /select button onClick { this.increment }/button button onClick { this.decrement }-/button button onClick { this.incrementIfOdd }当前求和为奇数再加/button button onClick { this.incrementAsync }异步加/button /div ) }2、容器组件下载react-redux依赖。创建containers文件用以放入更多的容器组件便于管理并在其创建Count文件夹和Count文件夹里的index.jsx文件//引入之前改造的UI组件 import CountUI from ./count //引入store import store from ../redux/store //引入connect用于连接UI组件与redux import { connect } from react-redux //使用connect()()创建并暴露一个Count的容器组件 //const CountContainer connect()(CountUI) export default connect()(CountUI)展示页面的时候就不能使用改造的UI组件了就需要使用容器组件了App.jsximport React,{ Component } from react import Count from ./containers/Count import from ./redux/store export default class App extends Component { reder(){ return ( div Count store { store }/ /div ) } }react-redux的基本使用1、容器组件改造//引入之前改造的UI组件 import CountUI from ./count //引入store import store from ../redux/store //引入connect用于连接UI组件与redux import { connect } from react-redux //a函数返回的对象中的key就作为传递给UI组件props的key //value就作为传递给UI组件props的value--状态 function a(){ return { n900 } } //b函数返回的对象中的key就作为传递给UI组件props的key //value就作为传递给UI组件props的value--操作状态的方法 function b(){ return { jia:(){ console.log(1) } } } //使用connect()()创建并暴露一个Count的容器组件 export default connect(a,b)(CountUI)2、UI组件中打印propsrender(){ console.log(this.props) }利用这点UI组件就可以展示容器组件传递的值render( div h1当前求和为{ this.props.n }/h1 select ref{ c this.selectNumber c } option value11/option option value22/option option value33/option /select button onClick { this.increment }/button button onClick { this.decrement }-/button button onClick { this.incrementIfOdd }当前求和为奇数再加/button button onClick { this.incrementAsync }异步加/button /div )3、容器组件中传递store或操作给UI组件//引入之前改造的UI组件 import CountUI from ./count //引入store import store from ../redux/store //引入connect用于连接UI组件与redux import { connect } from react-redux //a函数返回的对象中的key就作为传递给UI组件props的key //value就作为传递给UI组件props的value--状态 function a(state){ return { countstate } } //b函数返回的对象中的key就作为传递给UI组件props的key //value就作为传递给UI组件props的value--操作状态的方法 function b(dispatch){ return { jia:(number){ //通知redux执行方法 dispatch(type:increment,data:number) //也可以使用我们在之前的文章中提到的action改写 //dispatch(createIncrementAction(number)) } } } //使用connect()()创建并暴露一个Count的容器组件 export default connect(a,b)(CountUI)4、UI组件调用容器组件方法increment () { const { value } this.selectNumber this.props.jia(value*1) }5、正式化容器组件//引入之前改造的UI组件 import CountUI from ./count //引入store import store from ../redux/store //引入createIncrementAction、createDecrementAction、createIncrementAsyncAction 。。。。。 //引入connect用于连接UI组件与redux import { connect } from react-redux //mapStateToProps函数返回是一个对象 //返回的对象中的key就作为传递给UI组件props的keyvalue就作为传递给UI组件props的value //mapStateToProps用于传递状态 function mapStateToProps(state){ return { countstate } } //mapDispatchToProps函数返回是一个对象 //返回的对象中的key就作为传递给UI组件props的keyvalue就作为传递给UI组件props的value //mapDispatchToProps用于传递操作状态的方法 function mapDispatchToProps(dispatch){ return { jia(number){ dispatch(createIncrementAction(number)) }, jian(number){ dispatch(createDecrementAction(number)) }, jiaAsync(number,time){ dispatch(createIncrementAsyncAction(number,time)) }, } } //使用connect()()创建并暴露一个Count的容器组件 export default connect(mapStateToProps,mapDispatchToProps)(CountUI)总结1、明确两个概念UI组件不能使用任何redux的api只负责页面的呈现、交互等容器组件负责和redux通信将结果交给UI组件2、如何创建一个容器组件——靠react-redux的connect函数connect(mapStateToProps,mapDispatchToProps)(UI组件)——mapStateToProps映射状态返回值是一个对象——mapDispatchToProps映射操作状态的方法返回值是一个对象3、容器组件中的store是靠props传进去的而不是在容器组件中直接引入的