Redux-react connect 的源码从新写了一遍

import Counter from ‘../components/Counter‘;
import { increment, decrement, incrementIfOdd, incrementAsync } from ‘../actions‘;
import { bindActionCreators } from ‘redux‘;
import React, { Component, createElement } from ‘react‘;
import PropTypes from ‘prop-types‘;
import hoistStatics from ‘hoist-non-react-statics‘
import * as ActionCreators from ‘../actions‘;

const storeShape = PropTypes.shape({
  subscribe: PropTypes.func.isRequired,
  dispatch: PropTypes.func.isRequired,
  getState: PropTypes.func.isRequired
});

const connect = function(mapStateToProps, mapDispatchToProps){
    return function(WrappedComponent){
        class Connect extends Component {
            constructor(props, context) {
              super(props, context)
              this.store = props.store || context.store;

              const storeState = this.store.getState()
              this.state = { storeState }
            }

            handleChange() {
              const storeState = this.store.getState();
              this.setState({ storeState });
            }

            trySubscribe() {
                this.store.subscribe(this.handleChange.bind(this))
                this.handleChange();
            }

            componentDidMount() {
                this.trySubscribe();
            }

            render() {
                let store =  this.store;
                let dispatch = store.dispatch;
                let mergedProps = {};

                let dispatchProps;
                // 若它是个函数
                if (typeof mapDispatchToProps == ‘function‘){
                    dispatchProps = mapDispatchToProps;
                } else if(!mapDispatchToProps){
                    // 若没有传递参数
                    dispatchProps = dispatch => ({ dispatch });
                } else {
                    // 若 mapDispatchToProps 是一个对象
                    const wrapActionCreators = function(actionCreators) {
                      return function (dispatch) {
                        return bindActionCreators(actionCreators, dispatch);
                      };
                    }
                    dispatchProps = wrapActionCreators(mapDispatchToProps);

                    // 若它是个对象, 属性值 是一个action create, 类似
                    // for(let j in mapDispatchToProps){
                    //     dispatchProps[j] = () => {
                    //         dispatch(mapDispatchToProps[j]());
                    //     }
                    // }
                }
                dispatchProps = dispatchProps(dispatch);

                let stateProps = mapStateToProps( this.state.storeState );
                for(let i in stateProps){
                    mergedProps[i] = stateProps[i];
                }

                for(let i in dispatchProps){
                    mergedProps[i] = dispatchProps[i];
                }

                return createElement(WrappedComponent,
                    mergedProps
                );
            }
        }

        Connect.contextTypes = {
          store: storeShape
        }
        Connect.propTypes = {
          store: storeShape
        }
        return hoistStatics(Connect, WrappedComponent);
    }
}

export default connect(
  state => ({ counter: state.counter }),
  /*
      注意这里写成如下形式不会被执行
      dispatch => ({
        increment: increment,
        decrement: decrement,
        incrementIfOdd: incrementIfOdd,
        incrementAsync: incrementAsync,
      })
  */
  // dispatch => ({
  //   increment: () => dispatch( increment() ),
  //   decrement: () => dispatch( decrement() ),
  //   incrementIfOdd: () => dispatch( incrementIfOdd() ),
  //   incrementAsync: () => dispatch( incrementAsync() )
  // })
  // ActionCreators
  dispatch => bindActionCreators(ActionCreators, dispatch)
)(Counter);
时间: 2024-10-04 16:49:52

Redux-react connect 的源码从新写了一遍的相关文章

正式学习React(五) react-redux源码分析

磨刀不误砍柴工,咱先把react-redux里的工具函数分析一下: 源码点这里  shallowEqual.js 1 export default function shallowEqual(objA, objB) { 2 if (objA === objB) { 3 return true 4 } 5 6 const keysA = Object.keys(objA) 7 const keysB = Object.keys(objB) 8 9 if (keysA.length !== keys

Redux系列x:源码解析

写在前面 redux的源码很简洁,除了applyMiddleware比较绕难以理解外,大部分还是 这里假设读者对redux有一定了解,就不科普redux的概念和API啥的啦,这部分建议直接看官方文档. 此外,源码解析的中文批注版已上传至github,可点击查看.本文相关示例代码,可点击查看. 源码解析概览 将redux下载下来,然后看下他的目录结构. npm install redux 这里我们需要关心的主要是src目录,源码解析需要关心的文件都在这里面了 index.js:redux主文件,主

【React Native】源码分析之Native UI的封装和管理

??ReactNative作为使用React开发Native应用的新框架,随着时间的增加,无论是社区还是个人对她的兴趣与日递增.此文目的是希望和大家一起欣赏一下ReactNative的部分源码.阅读源码好处多多,让攻城狮更溜的开发ReactNative应用的同时,也能梳理RN项目的设计思路,增加自己的内功修为,^_^. ??好的,就让我们轻松的开始吧.此篇是以Android平台源码分析为主,分享Native UI的封装和管理,重点涉及react-native源码中com.facebook.rea

React Native Android 源码框架浅析(主流程及 Java 与 JS 双边通信)

[工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 有了前面<React Native Android 从学车到补胎和成功发车经历>和<React Native Android Gradle 编译流程浅析>两篇文章的学习我们 React Native 已经能够基本接入处理一些事情了,那接下来的事情就是渐渐理解 RN 框架的一些东西,以便裁剪和对 RN 有个更深入的认识,所以本篇总结了我这段时间阅读源码

React Native IOS源码初探

原文链接 http://www.open-open.com/lib/view/open1465637638193.html 每个项目都有一个入口,然后进行初始化操作,React Native 也不例外.一个不含 Objective-C 代码的项目留给我们的唯一线索就是位于 AppDelegate 文件中的代码: RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"re

android应用开发--------------看RadioGroup源码,写类似单选选项卡的集成控件(如底部导航,tab等等)

博客为 有时个哥 原创,如需转载请标明出处:http://blog.csdn.net/ls703/article/details/46694967 上面就是需求设计,4个类似的布局控件,每次只能选择一个,然后得到上面对应的钱数.(上面只是效果图,实际数据是从服务器获取,然后付到控件上) 看到这种,我们就回想到,几种实现方法. 1.把这个整体写一个布局,在xml布局中,复制粘贴,代码,凑够4个.非常不建议这样,因为4个的布局样式是一样的,只是数据可能不相同,所以我们应该写一个组合控件然后重复利用.

了解mybatis源码手写mybatis

一:mybatis概述 MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息,将接口和 Java 的 POJOs(Plain Ordinary Java Object,普通的 Java对象)映射成数据库中的记录. 二:手写mybatis 实现思路:: 1创建SqlSessionFactory实例 2:实例化过程中,加载配置

Python源码---Excell写

CMD安装 xlwt pip install xlwt -i http://mirrors.aliyun.com/pypi/simple/ --trusted-host mirrors.aliyun.com 源码———— import xlwtnew_workbook = xlwt.Workbook()worksheet = new_workbook.add_sheet('new_test')worksheet.write(0,0,'test')new_workbook.save('d:/tes

大概看了一天python request源码。写下python requests库发送 get,post请求大概过程。

python requests库发送请求时,比如get请求,大概过程. 一.发起get请求过程:调用requests.get(url,**kwargs)-->request('get', url, **kwargs)-->session.request(method="get", url=url, **kwargs)-->session.send(request, **kwargs)-->adapter.send(request, **kwargs)-->