申明：瀏覽本篇文章需要對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整合的簡樸完成。
