• 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上面,就会执行

  • 相关阅读:
    java控制台输入
    冒泡排序
    选择排序
    Json数组去重
    HTTP状态码详解
    根据json对象的值替换json数组里的值
    用户中心页面
    正则表达式
    vue-router如何根据不同的用户给不同的权限
    vue2.0+element+node+webpack搭建的一个简单的后台管理界面
  • 原文地址:https://www.cnblogs.com/MDGE/p/14389526.html
Copyright © 2020-2023  润新知