React-Redux的用法

leap_frog 發(fā)布于2019-08-20 18:19 / 2216人閱讀

摘要：基本流程組件只接受數(shù)據(jù)包括出來的數(shù)據(jù)以及方法容器組件通過將返回的作為傳入通過將作為傳入通過方法將這兩個方法與組件連接起來返回一個容器組件組件將所有組件分成兩大類組件和容器組件組件有以下幾個特征只負責的呈現(xiàn)不帶有任何業(yè)務(wù)邏輯沒有狀態(tài)即不

基本流程

1.UI組件Example,只接受this.props數(shù)據(jù),包括reducer出來的數(shù)據(jù)state,
以及dispatch方法.
2.容器組件
const store = createStore(reducer);
通過mapStateToProps將reducer返回的state作為this.props傳入.
通過mapDispatchToProps將action作為this.props傳入.
通過connect方法將這兩個方法與Example組件連接起來,返回一個容器組件.

import React, { Component } from "react";
import { render } from "react-dom";
import { createStore } from "redux";
import { Provider, connect } from "react-redux";
import reducer from "../reducers/reducer6.js";
import { addAction, delAction } from "../actions/action2.js";
import Example from "../components/Example5.js";

const store = createStore(reducer);

function mapStateToProps(state) {
    return {
        count: state.count
    };
}

function mapDispatchToprops(dispatch) {
    return {
        add: () => dispatch(addAction()),
        del: () => dispatch(delAction())
    };
}

const App = connect(mapStateToProps, mapDispatchToprops)(Example)

render(
    
        
    ,
    document.getElementById("root")
);

import React, { Component } from "react";

class Example extends Component {
    render() {
        const { count, add, del } = this.props;

        return (
            
                count: { count }
                
                
            
        );
    }
}

export default Example;

UI組件

1.React-Redux將所有組件分成兩大類:UI組件和容器組件.
2.UI組件有以下幾個特征:

import React, { Component } from "react";

class Counter extends Component {
    render() {
        const { value, onIncreaseClick } = this.props;

        return (
            
                { value }
                
            
        );
    }
}

export default Counter;

1.只負責UI的呈現(xiàn),不帶有任何業(yè)務(wù)邏輯
2.沒有狀態(tài)(即不使用this.state這個變量)
3.所有數(shù)據(jù)都由參數(shù)(this.props)提供
4.不適用任何redux的API

因為不含有狀態(tài),UI組件又被稱為"純組件",即它跟純函數(shù)一樣,純粹由參數(shù)決定它的值.

容器組件

// Action
const increaseAction = {
    type: "increase"
};

// Reducer
function counter(state = { count: 0 }, action) {
    const count = state.count;
    switch (action.type) {
        case "increase":
            return {
                count: count + 1
            }
        default:
            return state;
    }
}

// Store
const store = createStore(counter);

// Map Redux state to component props
function mapStateToProps(state) {
    return {
        value: state.count
    };
}

// Map Redux actions to component props
function mapDispatchToProps(dispatch) {
    return {
        onIncreaseClick: () => dispatch(increaseAction)
    };
}

// Connected Component
const App = connect(mapStateToProps, mapDispatchToProps)(Counter);

容器組件的特征恰恰相反

1.負責管理數(shù)據(jù)和業(yè)務(wù)邏輯,不負責UI的呈現(xiàn)
2.帶有內(nèi)部狀態(tài)
3.使用redux的API

UI組件負責UI的呈現(xiàn),容器組件負責管理數(shù)據(jù)和邏輯.
react-redux規(guī)定,所有的UI組件都由用戶提供,容器組件則是由react-redux自動生成,也就是說,
用戶負責視覺層,狀態(tài)管理則是全部交給它.

connect()

react-redux提供connect方法,用于從UI組件生成容器組件.
connect的意思,就是將這兩種組件連起來.
const App = connect(mapStateToProps, mapDispatchToProps)(Counter);
Counter是UI組件,App就是由React-Redux通過connect方法自動生成的容器組件.
但是,因為沒有定義業(yè)務(wù)邏輯,上面這個容器組件毫無意義,只是Ui組件的一個單純的包裝層.
為了定義業(yè)務(wù)邏輯,需要給出下面兩方面的信息.

1.輸入邏輯:外部的數(shù)據(jù)(即state對象)如何轉(zhuǎn)化為UI組件的參數(shù).
2.輸出邏輯:用戶發(fā)出的動作如何變?yōu)锳ction對象,從UI組件傳出去

connect方法接受兩個參數(shù):mapStateToProps和mapDispatchToProps,他們定義了UI組件的業(yè)務(wù)邏輯,
前者負責輸入邏輯,即將state映射到Ui組件的參數(shù)(props),后者負責輸出邏輯,即將用戶對UI組件的操作映射成Action.

mapStateToProps()

mapStateToProps是一個函數(shù),它的作用就是像它的名字那樣,建立一個從(外部的)state對象到(Ui組件的)props對象的映射關(guān)系.
作為函數(shù),mapStateToProps執(zhí)行后應(yīng)該返回一個對象,里面的每一個鍵值對就是一個映射.
mapStateToProps會訂閱store,每當state更新的時候,就會自動執(zhí)行,重新計算UI組件的參數(shù),從而
觸發(fā)UI組件的重新渲染.
mapStateToProps的第一個參數(shù)是state對象.

mapDispatchToProps

mapDispatchToProps是connect函數(shù)的第二個參數(shù),用來建立UI組件的參數(shù)到store.dispatch方法的映射,
也就是說,他定義了哪些用戶的操作應(yīng)該當作Action,傳給Store,它可以是一個函數(shù),也可以是一個對象.
如果mapDispatchToProps是一個函數(shù),會得到dispatch和ownProps(容器組件的props對象)兩個參數(shù).
作為函數(shù),應(yīng)該返回一個對象,該對象的每個鍵值對都是一個映射,定義了UI組件的參數(shù)怎樣發(fā)出Action.

組件

connect方法生成容器組件以后,需要讓容器組件拿到state對象,才能生成UI組件的參數(shù).
react-redux提供Provider組件,可以讓容器組件拿到state.
Provider在根組件外面包了一層,這樣一來,App的所有子組件就默認都可以拿到state了.
它的原理是React組件的context屬性.
react-redux自動生成的容器組件的代碼,就類似上面這樣,從而拿到store.

render(
    
        
    ,
    document.getElementById("root")
);

React-Router路由庫

使用React-Router的項目,與其他項目也沒有不同之處,也是使用Provider在Router外面包一層,畢竟Provider的唯一功能就是傳入store對象.

const root = ({ store }) => (
    
        
            
        
    
);

云服務(wù)器 GPU云服務(wù)器 react-redux 的用法 cdn的用法 find的用法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84334.html

發(fā)表評論

登陸后可評論

0條評論

leap_frog

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow圖像處理

閱讀 2952·2023-04-25 19:20
周鴻祎的“花房上市”執(zhí)念

閱讀 814·2021-11-24 09:38
一起用python做個炫酷音樂播放器，想聽啥隨便搜！【V2.0升級版，含源碼及打包exe】

閱讀 2066·2021-09-26 09:55
python破解加密的rar，zip文件

閱讀 2443·2021-09-02 15:11
在單頁應(yīng)用中，如何優(yōu)雅的監(jiān)聽url的變化

閱讀 2075·2019-08-30 15:55
無單位數(shù)字line-height

閱讀 3621·2019-08-30 15:54
ES6 常用知識點總結(jié)

閱讀 3159·2019-08-30 14:03
H5視頻直播原理

閱讀 2972·2019-08-29 17:11

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

React-Redux的用法

相關(guān)文章

react-redux用法及源碼解讀

**一篇文章總結(jié)redux、react-redux、redux-saga**

**關(guān)于React-redux的Provider, connect的解析**

**帶著問題看 react-redux 源碼實現(xiàn)**

React-redux基礎(chǔ)

發(fā)表評論

0條評論

leap_frog

男|高級講師

TA的文章

tensorflow圖像處理

周鴻祎的“花房上市”執(zhí)念

一起用python做個炫酷音樂播放器，想聽啥隨便搜！【V2.0升級版，含源碼及打包exe】

python破解加密的rar，zip文件

在單頁應(yīng)用中，如何優(yōu)雅的監(jiān)聽url的變化

無單位數(shù)字line-height

ES6 常用知識點總結(jié)

H5視頻直播原理

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

React-Redux的用法

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！