redux原理分析

jubincn 发布于2019-08-21 11:35 / 3074人阅读

摘要：介绍是一个针对应用的可预测的状态管理器。中的设计模式装饰者模式定义装饰者模式用于给对象动态地增加职责。连接操作不会改变原来的组件类，而是返回一个新的已与连接的组件类。的这行代码表示它对的数据进行订阅。

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源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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