redux原理分析

jubincn 發(fā)布于2019-08-21 11:35 / 3077人閱讀

摘要：介紹是一個(gè)針對(duì)應(yīng)用的可預(yù)測的狀態(tài)管理器。中的設(shè)計(jì)模式裝飾者模式定義裝飾者模式用于給對(duì)象動(dòng)態(tài)地增加職責(zé)。連接操作不會(huì)改變?cè)瓉淼慕M件類，而是返回一個(gè)新的已與連接的組件類。的這行代碼表示它對(duì)的數(shù)據(jù)進(jìn)行訂閱。

redux介紹

redux是一個(gè)針對(duì)JavaScript應(yīng)用的可預(yù)測的狀態(tài)管理器。

redux中的設(shè)計(jì)模式 裝飾者模式

定義：裝飾者模式用于給對(duì)象動(dòng)態(tài)地增加職責(zé)。

我們來看看redux最早期（v0.2.0）的github代碼：

//Counter.js
import React from "react";
import { performs, observes } from "redux";

@performs("increment", "decrement","double")
@observes("CounterStore")
export default class Counter {
  render() {
    const { increment, decrement } = this.props;
    return (
      
        Clicked: {this.props.counter} times
        {" "}
        
        {" "}
        
        {" "}
        
      
    );
  }
}

經(jīng)過observes的包裝后，react組件可以訪問Redux store里的couter數(shù)據(jù)；經(jīng)過performs的包裝后，react組件可以發(fā)起increment、decrement和double這3個(gè)Action。

我們來看看performs是怎么包裝react組件的：

//performs.js
import React, { Component, PropTypes } from "react";
import pick from "lodash/object/pick";
import identity from "lodash/utility/identity";

const contextTypes = {
    getActions: PropTypes.func.isRequired
};

export default function performs(...actionKeys) {
    
    let mapActions = identity;

    return function (DecoratedComponent) {
        
        const wrappedDisplayName = DecoratedComponent.name;

        return class extends Component {
            static displayName = `ReduxPerforms(${wrappedDisplayName})`;
            static contextTypes = contextTypes;

            constructor(props, context) {
                super(props, context);
                this.updateActions(props);
            }
            
            updateActions(props) {
                this.actions = mapActions(
                    pick(this.context.getActions(), actionKeys),
                    props
                );
            }

            render() {
                return (
                    
                );
            }
        };
    };
}

很簡單對(duì)不對(duì)，performs實(shí)質(zhì)上是一個(gè)高階函數(shù)，接收一個(gè)react組件類型的參數(shù)DecoratedComponent，然后返回一個(gè)高階組件，該組件包裝了傳遞進(jìn)來的react組件，并向該組件傳遞了action相關(guān)的props.

通過可以看上面的圖可以看出，Counter組件被Observes包裝后，又被performs包裝，形成了一條包裝鏈。

redux提供的API中，有一個(gè)重要的方法connect，用于連接 React 組件與 Redux store。連接操作不會(huì)改變?cè)瓉淼慕M件類，而是返回一個(gè)新的已與 Redux store 連接的組件類。典型的裝飾者模式有木有？

觀察者模式

定義：觀察者模式又叫發(fā)布-訂閱模式，它定義對(duì)象間的一種一對(duì)多的依賴關(guān)系，當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變時(shí)，所有依賴它的對(duì)象都將得到通知。

@observes("CounterStore")

counter.js的這行代碼表示它對(duì)Redux的CounterStore數(shù)據(jù)進(jìn)行訂閱。我們來看看objserves的實(shí)現(xiàn)：

//observes.js
import React, { Component, PropTypes } from "react";
import pick from "lodash/object/pick";

const contextTypes = {
    observeStores: PropTypes.func.isRequired
};

export default function connect(...storeKeys) {

    return function (DecoratedComponent) {

        const wrappedDisplayName = DecoratedComponent.name;

        return class extends Component {
            static displayName = `ReduxObserves(${wrappedDisplayName})`;
            static contextTypes = contextTypes;

            constructor(props, context) {
                super(props, context);
                this.handleChange = this.handleChange.bind(this);
                this.unobserve = this.context.observeStores(storeKeys , this.handleChange); //訂閱store數(shù)據(jù)
            }
            
            handleChange(stateFromStores) {
                this.currentStateFromStores = pick(stateFromStores, storeKeys);
                this.updateState(stateFromStores);
            }
            
            updateState(stateFromStores, props) {
                stateFromStores = stateFromStores[storeKeys[0]];
                const state = stateFromStores;
                this.setState(state);//通過setState進(jìn)行組件更新
            }

            componentWillUnmount() {
                this.unobserve();//退訂
            }

            render() {
                return (
                    
                );
            }
        };
    };
}

當(dāng)數(shù)據(jù)變化時(shí)，通過調(diào)用setState方法，進(jìn)而對(duì)Counter組件進(jìn)行UI更新。

GPU云服務(wù)器云服務(wù)器 js跨域原理分析 Redux 語音降噪圖形分析原理webrtc redux源碼

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

jubincn

男|高級(jí)講師

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

TA的文章

#yyds干貨盤點(diǎn)#安全漏洞頻出，信息系統(tǒng)中安全防護(hù)如何有效構(gòu)建？

閱讀 3566·2021-11-22 15:11
測評(píng)racknerd雙11促銷款VPS，看看近期的racknerd到底如何

閱讀 4654·2021-11-18 13:15
如何閱讀《JavaScript高級(jí)程序設(shè)計(jì)》（一）

閱讀 2713·2019-08-29 14:08
symbol

閱讀 3587·2019-08-26 13:49
關(guān)于NaN

閱讀 3103·2019-08-26 12:17
awesome-typescript-loader報(bào)watchRun問題

閱讀 3297·2019-08-26 11:54
ES6 class繼承與super關(guān)鍵詞深入探索

閱讀 3122·2019-08-26 10:58
運(yùn)算符比較運(yùn)算符

閱讀 2040·2019-08-26 10:21

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

資訊專欄INFORMATION COLUMN

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

redux原理分析

相關(guān)文章

**純Redux原理分析**