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

2023年12月24日 261次阅读 来源: 木子

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的用法啦。若有不对，还请斧正。

人人加油！！！

    原文作者：木子
    原文地址: https://segmentfault.com/a/1190000017994290
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞