zoukankan      html  css  js  c++  java
  • react-redux里面的Provider,connect了解其源码

    准备条件  ,场景。我打算做一个点击button数字就会加的操作。首先我用官方的redux,但是react-redux我会用自己写的react-redux

    整体的架构,感兴趣的小伙伴可以借鉴一下。

     

     肯定对reduxContext充满了疑问,其实这里就是船建一个React.createContext()空对象   

     说了这么多看下ui组件

     

     connect第一个参数的目的是把store中的state变为this.props,第二个参数就是actions,他是把dipatch变为this.props.dispatch这样的方式来改变store里面的数据

    明白connect的作用我们来看下connect里面的具体实现

     首先需要知道在react组件里面定义static contextTye属性是可以拿到 <****.Provider> 中的value的,这个源码中也可以了解到。

    createStore之后会返回store对象。那么我们在上面的this.props.chidlren中拿到store的方式就变为了,this.context.store.但是在contructor里面却不行。因为this为undefined.但是可以通过上下文参数context

    在connect里面定义state,把store当作this.props传进去。这样已经可以实现显示目的了,在想办法拿到this.props.action(大约是这个东西,理解就行)就可以实现了

    bindActionsCreators

    这样返回一个对象我们通过结构,传到OldComponent组件当中

    其实boundActions里面放的是什么呢,就是即将出发的dispatch({type:''}),我们对应的对象放在onClick上面,就会执行

  • 相关阅读:
    (转)php读写文件
    CentOS5.2下安装GCC4.1.2
    使用php模拟post提交数据
    Linux系统信息查看命令大全
    强制卸载MYSQL
    Php文件操作
    redhat linux上安装 gcc编译器
    centos5.2安装mysql6.0
    如何收缩数据库日志文件(ldf)
    浑沌的JSON,JS Object,JS Array
  • 原文地址:https://www.cnblogs.com/MDGE/p/14389526.html
Copyright © 2011-2022 走看看