内容简介:react-redux的实现原理: Redux作为一个通用的模块,主要还是用来应用项目中state的变更,通过react-redux做连接,可以在React+Redux的项目中将两者结合的更好。React-redux是一个轻量级的封装库,主要有两个核心方法实现:Provider是react-redux给react提供的一个组件,从外部封装了整个应用,并向connect模块传递store
react-redux的实现原理: Redux作为一个通用的模块,主要还是用来应用项目中state的变更,通过react-redux做连接,可以在React+Redux的项目中将两者结合的更好。
React-redux是一个轻量级的封装库,主要有两个核心方法实现:
Provider
Provider是react-redux给react提供的一个组件,从外部封装了整个应用,并向connect模块传递store
import { Provider } from 'react-redux'; class APP extents React.component { render ( return ( <div className='APP'> <Provider store={ store }> <Header/> </Provider> </div> ) ); } export default APP;
CONNECT
connect是react-redux提供的第二个核心API,即让本组件与store做连接,映射到props当中;
1、包装原组件,将state和action通过props的方式传入到原组件内部 2、监听store变化,使其包装的原组件可相应state变化。
import { connect } from 'react-redux'; class Detail extends React.Component { } const mapStateToProps = (state) => ({ }); const mapDispatchToProps= (dispatch) => ({ }); export default connect(mapStateToProps, mapDispatchToProps)(Detail);
上述便是react-redux两个核心API的用法啦。如有不对,还请指正。
大家加油!!!
以上所述就是小编给大家介绍的《关于React-redux的Provider, connect的解析》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 每秒解析千兆字节的 JSON 解析器开源,秒杀一大波解析器!
- 注册中心 Eureka 源码解析 —— EndPoint 与 解析器
- 新一代Json解析库Moshi源码解析
- mybatis源码配置文件解析之三:解析typeAliases标签
- MySQL内核源码解读-SQL解析之解析器浅析
- Laravel 核心——IoC 服务容器源码解析(服务器解析)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。