react-redux的实现原理: Redux做为一个通用的模块,主要仍是用来应用项目中state的变动,经过react-redux作链接,能够在React+Redux的项目中将二者结合的更好。
React-redux是一个轻量级的封装库,主要有两个核心方法实现:react
Provider是react-redux给react提供的一个组件,从外部封装了整个应用,并向connect模块传递storeredux
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是react-redux提供的第二个核心API,即让本组件与store作链接,映射到props当中;ide
一、包装原组件,将state和action经过props的方式传入到原组件内部 二、监听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的用法啦。若有不对,还请指正。spa
你们加油!!!code