关于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);