React與Redux整合技術簡介

idealcn 發布于2019-08-22 17:20 / 3086人閱讀

摘要：展示組件與容器組件的綁定庫的基本開發思想是展示組件與容器組件相分離。技術上講，容器組件就是使用從樹中讀取部分數據，并通過來把這些數據提供給要渲染的組件。

說明：閱讀本篇文章需要對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 = ;
        }
        return (
               
                
                
                
                {sliderNode}
            
        );
    }
};

可以看到，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(
    
        
    ,
    $(".main-wrap")[0]
);

有一點要注意，provider內的組件只能有一個，所以需要將所有組件先封裝成一個組件再用provider包裹起來。

6. 總結

Redux的引入使React徹底脫離了對數據狀態的管理，可以讓React更專注于View的展現，實際上這也是react善于做的事情。多帶帶看react，我們甚至感覺不到redux的存在，使邏輯層和視圖層更加清晰（redux負責邏輯，react負責視圖），當然一部分原因要歸功于react-redux包做了很好的封裝。

以上就是React與Redux整合的簡單實現。

參考

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

GPU云服務器云服務器 react-redux React_Redux_Appointm react-router-redux 技術整合

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95077.html

Redux概念之一: Redux簡介

摘要：應用這說明并不是單指設計給用的，它是獨立的一個函數庫，可通用于各種應用。在數據流的最后，要觸發最上層組件的，然后進行整體的重新渲染工作。單純在的對象上是沒有辦法使用，要靠額外的函數庫才能這樣作，這是一定要使用類似像這種函數庫的主要原因。 Redux的官網中用一句話來說明Redux是什么: Redux是針對JavaScript應用的可預測狀態容器這句話雖然簡短，其實是有幾個涵義的: ...

cjie 2019-08-20 13:59 評論0 收藏0
Redux技術架構簡介（二）-- 異步實現

摘要：異步實現設計需要增加三種通知異步請求發起的異步請求成功的異步請求失敗的示例代碼如下返回參數完全可以自定義。這種分別在請求開始前，請求成功后，請求失敗后發送。表示數據的有效性，他的作用是在異步請求發送失敗后，告訴當前的數據是過時的數據。說明：對Redux不了解的同學可先看看這篇文章Redux技術架構簡介（一）前言這里說的Redux異步實現，是專指Redux中的異步Action實現，...

wuaiqiu 2019-08-22 17:20 評論0 收藏0
【全棧React】React 30天教程索引

摘要：今天我們將討論創建組件的最終方案，即無狀態函數的純組件。今天我們正在研究一種處理提出的復雜數據的方法，稱為體系結構。第天部署介紹今天，我們將探討部署我們的應用所涉及的不同部分，以便外界可以使用我們的應用。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...

appetizerio 2019-08-20 18:33 評論0 收藏0
Redux技術架構簡介

摘要：是一個程序架構，源于提出的一種架構，然而，它不僅可以應用于，還可以應用于其他任何框架中。有以下職責維持應用的提供方法獲取提供方法更新通過注冊監聽器通過返回的函數注銷監聽器。同時，的返回值實際上是一個函數可以解除監聽。 Redux是一個程序架構，源于Flux（Facebook提出的一種架構），然而，它不僅可以應用于React，還可以應用于其他任何框架中。值得一提的是，Redux的源代碼很...

weizx 2019-08-22 17:05 評論0 收藏0
Taro 簡介

摘要：讓人又愛又恨的微信小程序自微信小程序以下簡稱小程序誕生以來，就伴隨著贊譽與爭議不斷。同時于開發者來說，小程序的生態不斷在完善，許多的坑已被踩平，雖然還是存在一些令人詬病的問題，但已經足見微信的誠意了。 Taro 介紹在互聯網不斷發展的今天，前端程序員們也不斷面臨著新的挑戰，在這個變化多端、不斷革新自己的領域，每一年都有新的美好事物在發生。從去年微信小程序的誕生，到今年的逐漸火熱，以及...

sixgo 2019-08-23 16:18 評論0 收藏0