关于React-redux的Provider, connect的解析

发布时间:2019-06-06 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了关于React-redux的Provider, connect的解析脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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的解析全部内容,希望文章能够帮你解决关于React-redux的Provider, connect的解析所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。