redux原理分析

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

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

redux介紹

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

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

定義：裝飾者模式用于給對象動態(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個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 (
                    
                );
            }
        };
    };
}

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

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

redux提供的API中，有一個重要的方法connect，用于連接 React 組件與 Redux store。連接操作不會改變原來的組件類，而是返回一個新的已與 Redux store 連接的組件類。典型的裝飾者模式有木有？

觀察者模式

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

@observes("CounterStore")

counter.js的這行代碼表示它對Redux的CounterStore數(shù)據(jù)進行訂閱。我們來看看objserves的實現(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進行組件更新
            }

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

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

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