redux原理分析

jubincn 發布于2019-08-21 11:35 / 3070人閱讀

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

redux介紹

redux是一個針對JavaScript應用的可預測的狀態管理器。

redux中的設計模式 裝飾者模式

定義：裝飾者模式用于給對象動態地增加職責。

我們來看看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
        {" "}
        
        {" "}
        
        {" "}
        
      
    );
  }
}

經過observes的包裝后，react組件可以訪問Redux store里的couter數據；經過performs的包裝后，react組件可以發起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實質上是一個高階函數，接收一個react組件類型的參數DecoratedComponent，然后返回一個高階組件，該組件包裝了傳遞進來的react組件，并向該組件傳遞了action相關的props.

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

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

觀察者模式

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

@observes("CounterStore")

counter.js的這行代碼表示它對Redux的CounterStore數據進行訂閱。我們來看看objserves的實現：

//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數據
            }
            
            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 (
                    
                );
            }
        };
    };
}

當數據變化時，通過調用setState方法，進而對Counter組件進行UI更新。

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

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

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

純Redux原理分析

摘要：調用鏈中最后一個會接受真實的的方法作為參數，并借此結束調用鏈。總結我們常用的一般是除了和之外的方法，那個理解明白了，對于以后出現的問題會有很大幫助，本文只是針對最基礎的進行解析，之后有機會繼續解析對他的封裝前言雖然一直使用redux+react-redux，但是并沒有真正去講redux最基礎的部分理解透徹，我覺得理解明白redux會對react-redux有一個透徹的理解。其實，...

sumory 2019-08-22 17:07 評論0 收藏0
Redux原理分析

摘要：原理分析是什么很多人認為必須要結合使用，其實并不是的，是狀態容器，只要你的項目中使用到了狀態，并且狀態十分復雜，那么你就可以使用管理你的項目狀態，它可以使用在中，也可以使用中在中，當然也適用其他的框架。 Redux原理分析 Redux是什么很多人認為redux必須要結合React使用，其實并不是的，Redux 是 JavaScript 狀態容器，只要你的項目中使用到了狀態，并且狀態十...

cooxer 2019-08-26 10:18 評論0 收藏0
【源碼解析】redux-thunk

摘要：的返回值是函數，這個函數經調用，傳入參數，之后會在中間件鏈上進行傳遞，只要保證每個中間件的參數是并且將傳遞給下一個中間件。了解了Redux原理之后，我很好奇Redux中間件是怎么運作的，于是選了最常用的redux-thunk進行源碼分析。此次分析用的redux-thunk源碼版本是2.2.0，redux源碼版本是3.7.2。并且需要了解Redux原理 redux中間件都是由redu...

simpleapples 2019-08-21 17:10 評論0 收藏0
redux源碼分析

摘要：背景如今在如此復雜的前端交互和邏輯中，如果是單靠框架，，是遠遠不夠的，還需要一個對內部的數據狀態進行管理的機制才行，而對于這種數據管理機制如今較為熱門是主要有幾個，，這次主要講述的就是對源碼進行分析。由于這段時間一直很忙，所以本想六月初研究完redux源碼就寫一篇博客記錄一下自己的心得，但一直現在才空閑出來，廢話不多說了，直接說主題吧。背景：如今在如此復雜的前端交互和邏輯中，如果是...

Sike 2019-08-23 11:51 評論0 收藏0
基于react+react-router+redux+socket.io+koa開發一個聊天室

摘要：最近練手開發了一個項目，是一個聊天室應用。由于我們的項目是一個單頁面應用，因此只需要統一打包出一個和一個。而就是基于實現的一套基于事件訂閱與發布的通信庫。比如說，某一個端口了，而如果端口訂閱了，那么在端，對應的回調函數就會被執行。最近練手開發了一個項目，是一個聊天室應用。項目雖不大，但是使用到了react, react-router, redux, socket.io，后端開發使用了...

NusterCache 2019-08-20 14:48 評論0 收藏0