React-Redux

React-Redux是Redux的官方React绑定库,它能够使你的React组件从Redux store中读取数据,并且向store分发actions以更新数据

1.React-Redux将所有组件分成两大类:UI组件和容器组件。UI组件负责UI的呈现,容器组件负责管理数据和逻辑。

UI组件:只负责 UI 的呈现,不带有任何业务逻辑;没有状态(即不使用this.state这个变量);所有数据都由参数this.props提供;不使用任何Redux的API

容器组件:负责管理数据和业务逻辑,不负责UI的呈现;带有内部状态;使用Redux的API。

2.React-Redux 规定,所有的 UI 组件都由用户提供,容器组件则是由 React-Redux 自动生成。也就是说,用户负责视觉层,状态管理则是全部交给它。

3.<Provider>组件

connect方法生成容器组件以后,需要让容器组件拿到state对象,才能生成UI组件的参数。

React-Redux提供Provider组件,使整个app访问到Redux store中的数据 即state。


4.connect()


connect方法接受两个参数:mapStateToProps和mapDispatchToProps。它们定义了UI组件的业务逻辑。前者负责输入逻辑,即将state映射到UI组件的参数props,后者负责输出逻辑,即将用户对UI组件的操作映射成Action。

5.mapStateToProps

mapStateToProps是一个函数,它接受state作为参数,返回一个对象。这个对象有一个todos属性,代表UI组件的同名参数,后面的getVisibleTodos也是一个函数,可以从state算出todos的值。

mapStateToProps建立一个从(外部的)state对象到(UI组件的)props对象的映射关系。执行后应该返回一个对象,里面的每一个键值对就是一个映射。

6.mapDispatchToProps

mapDispatchToProps用来建立UI组件的参数到store.dispatch方法的映射。它定义了哪些用户的操作应该当作Action,传给Store。它可以是一个函数,也可以是一个对象。

是函数则会得到dispatch和ownProps(容器组件的props对象)两个参数。


是一个对象,它的每个键名也是对应 UI 组件的同名参数,键值应该是一个函数,会被当作 Action creator ,返回的 Action 会由 Redux 自动发出。


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容