關於React-redux的Provider, connect的解析

react-redux的實現原理: Redux做爲一個通用的模塊,主要仍是用來應用項目中state的變動,經過react-redux作鏈接,能夠在React+Redux的項目中將二者結合的更好。

React-redux是一個輕量級的封裝庫,主要有兩個核心方法實現:react

Provider

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

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

相關文章
相關標籤/搜索