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

栏目: 服务器 · 发布时间: 6年前

内容简介: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的解析》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

搜索引擎

搜索引擎

李晓明 / 科学出版社发行部 / 2005-4 / 33.00元

《搜索引擎:原理技术与系统》系统地介绍了互联网搜索引擎的工作原理、实现技术及其系统构建方案。《搜索引擎:原理技术与系统》分三篇共13章内容,从基本工作原理概述,到一个小型简单搜索引擎具体细节的实现,进而详细讨论了大规模分布式搜索引擎系统的设计要点及其关键技术;最后介绍了面向主题和个性化的web信息服务,阐述了中文网页自动分类等技术及其应用。《搜索引擎:原理技术与系统》层次分明,由浅入深;既有深入的......一起来看看 《搜索引擎》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器