React與Redux整合手藝簡介

申明:瀏覽本篇文章需要對Redux有肯定的相識,對Redux不相識的同硯可先看看這篇文章Redux手藝架構簡介(一)

1. React中引入react-redux

為了讓Redux和React更好的合營,Facebook特地開闢了一個npm包–react-redux,能夠如許引入你的項目:
npm install --save react-redux
固然不援用也完全能夠(Redux包是必需要援用的),只不過會增添一些開闢量,還會帶來一些分外的機能開支。

2. 展示組件與容器組件

Redux的React綁定庫的基礎開闢頭腦是展示組件與容器組件相星散。展示組件只擔任頁面顯現,不處置懲罰數據,不保護狀況;容器組件擔任頁面的運轉邏輯,獵取展示組件中的音訊,處置懲罰內部數據,更新狀況等。
《React與Redux整合手藝簡介》

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整合的簡樸完成。

參考

Redux 中文文檔
Redux 入門教程-阮一峰

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