申明:瀏覽本篇文章需要對Redux有肯定的相識,對Redux不相識的同硯可先看看這篇文章Redux手藝架構簡介(一)
1. React中引入react-redux
為了讓Redux和React更好的合營,Facebook特地開闢了一個npm包–react-redux,能夠如許引入你的項目: npm install --save react-redux
固然不援用也完全能夠(Redux包是必需要援用的),只不過會增添一些開闢量,還會帶來一些分外的機能開支。
2. 展示組件與容器組件
Redux的React綁定庫的基礎開闢頭腦是展示組件與容器組件相星散。展示組件只擔任頁面顯現,不處置懲罰數據,不保護狀況;容器組件擔任頁面的運轉邏輯,獵取展示組件中的音訊,處置懲罰內部數據,更新狀況等。
3. 展示組件的完成
React引入redux后,運用中只要單一的state樹,react的每一個組件都能夠揚棄state的相干邏輯,改成從props獵取,包括要實行的一些用戶事宜行動。
引入redux后的react組件變成:
class MainContent extends React.Component{
constructor(props){
super(props);
this.sortResult = this.sortResult.bind(this);
this.showSlider = this.showSlider.bind(this);
}
sortResult(data){
this.props.setPhoto(data);
}
showSlider(index){
this.props.showSlider(index);
}
componentDidMount () {
this.props.fetchPosts();
}
render(){
let {isFetching, isValidate} = this.props;
let sliderNode = null;
if(this.props.photo.length){
sliderNode = <PhotoSliderContainer data={this.props.photo} />;
}
return (
<div className="mainContent">
<Header title="photo" />
<SortContainer data={this.props.photo} sortResult={this.sortResult}/>
<PhotoItemsContainer data={this.props.photo} showSlider = {this.showSlider}/>
{sliderNode}
</div>
);
}
};
能夠看到,MainContent組件除了展示外,幾乎沒有任何的邏輯處置懲罰(subscribe和dispatch的邏輯都放到了容器組件),一切的數據都是經由過程this.props從父組件中獵取。
4. 容器組件的完成
容器組件完成了將展示組件和redux關聯在一起。手藝上講,容器組件就是運用 store.subscribe() 從 Redux state 樹中讀取部份數據,並經由過程 props 來把這些數據供應給要襯着的組件。發起每一個展示組件對應一個容器組件,如許能夠很清楚的找到映照關聯。
mapStateToProps函數
從名字上能夠看出,這個函數完成了從state(reducer中定義的)到展示組件props 的映照。示例代碼以下:
const mapStateToProps = (state, ownProps) => {
return {
photo : state.photomainReducer.photoData,
video : state.photomainReducer.videoData,
isFetching : state.photomainReducer.isFetching,
isValidate : state.photomainReducer.isValidate
}
}
傳入的state是運用中唯一的狀況樹,我們從響應組件的reducer中讀取state,離別映照到一個自定義屬性中,如許就能夠在展示組件中直接挪用對應屬性(props)了。
mapStateToProps會定閱 Store,每當state更新的時刻,就會自動實行,從新盤算 UI 組件的參數,從而觸發 UI 組件的從新襯着。
mapDispatchToProps函數
一樣我們也能夠猜到,這個函數的作用是將希冀實行的dispatch要領的返回值映照到展示組件的props上。示例代碼以下:
const mapDispatchToProps = (dispatch, ownProps) => {
return {
slider:(data) => dispatch(photomainAction.showSlider(data))
}
}
比方我們想dispatch一個showSlider的action,經由過程這個要領映照以後,就能夠直接如許寫:
this.props.slider(data)
即mapDispatchToProps封裝了dispatch要領。另外,還能夠經由過程redux供應的bindActionCreators函數進一步封裝,上面的代碼能夠改寫以下:
const mapDispatchToProps = (dispatch, ownProps) => {
return bindActionCreators({
slider:photomainAction.showSlider
},dispatch);
}
假如import時的action名和你想定義的屬性名一樣,以至還能夠簡化:
const mapDispatchToProps = (dispatch, ownProps) => {
return bindActionCreators({slider},dispatch);
}
connect函數
上面2個要領完成了state和action到props的映照,我們還需要把這2個函數銜接在一起,而且要關聯到一個詳細的展示組件,如許就能夠在展示組件中運用這類映照關聯了。示例代碼以下:
const PhotomainContainer = connect(
mapStateToProps,
mapDispatchToProps
)(Photomain);
个中,Photomain是一個展示組件。
每一個容器組件都包括一個對應的展示組件,我們能夠把這些容器組件當作一個一般的react組件舉行組合,整合的末了一步就是怎樣把store傳入到每一個組件中。
5. 傳入Store
Store保留了全部運用的單一狀況樹,一切容器組件都需要從store中讀取,我們能夠store作為屬性傳遞給每一個組件,子組件經由過程props獵取,然則假如嵌套過深,寫起來會很貧苦。還好,react-redux供應一個叫provider的組件,他能夠讓一切組件都能夠訪問到store(他的完成道理實際上是利用了react的context功用),而沒必要顯現的一層層傳遞了。
ReactDOM.render(
<Provider store={store}>
<PhotomainContainer></PhotomainContainer>
</Provider>,
$(".main-wrap")[0]
);
有一點要注意,provider內的組件只能有一個,所以需要將一切組件先封裝成一個組件再用provider包裹起來。
6. 總結
Redux的引入使React完全脫離了對數據狀況的治理,能夠讓React更專註於View的展示,實際上這也是react擅長做的事變。零丁看react,我們以至覺得不到redux的存在,使邏輯層和視圖層越發清楚(redux擔任邏輯,react擔任視圖),固然一部份緣由要歸功於react-redux包做了很好的封裝。
以上就是React與Redux整合的簡樸完成。