zoukankan      html  css  js  c++  java
  • 对react-redux中的的理解

    function cre(param){
                return Array.from(arguments)
            }
            function component(param){
                param = [1,2,3,4].concat(param)
                console.log(param)
                return param
            }

            function connect(param){
                let {state:number} = param
                return f=>{
                    f(cre(66,number))
                }
            }

            console.log(connect({state:99})(component))
     
    因为react-redux里面需要connect连接器进行连接,所以我写了connect高级函数,connect本身会返回一个函数小王,这个函数小王的参数是一个函数,connect的参数会合并到小王函数的内部,具体怎么合并看你自己
     
    不知道读者有没有和我一样经常忘记action里面的两个参数 ({type:'类型',data:'参数'}),接下来就是reducer纯函数里的参数,(state,action),state是上一次数据,或者初始化数据两种角色,action里面有type,还有用到的action参数里面用到的,比如我写的data,所以可以理解为action这个参数其实是action里面这两个东西。
    接下来说下react-redux中的connect的四个参数,第一个参数mapStateToProps,他是将store里面的数据转换为组件中可以通过this.props获取的属性
    第二个参数mapDispatchToProps,他是将action转换为组件中可以通过this.props去使用
    mergePropsoptions(后两个)
    bindActionCreators源码解析
    这个东西是什么呢?,是在你没有写action的时候,用的,先来看下我们单独分离出action.js的写法
    export const initContentsAsync = (data)=>{
        return dispatch=>{
            dispatch(initContents(data))
        }
    }
    比如咱们的初始化数据,那么可以想到这个bindActionCreators里面做的事,

    function mapDispatchToProps(dispatch) { return bindActionCreators({ actions.onIncrement }, dispatch); }

    她的用法就是这样,那么可想而知。源码里面他是进行了什么样的转换   
     
    function bindActionCreator(actionCreator, dispatch) {
      // 这个函数的主要作用就是返回一个函数,当我们调用返回的这个函数的时候,就会自动的dispatch对应的action
      // 这一块其实可以更改成如下这种形式更好
      // return function(...args) {return dispatch(actionCreator.apply(this, args))}
      return function() { return dispatch(actionCreator.apply(this, arguments)) }
    }
     
  • 相关阅读:
    512M内存机器如何用好Mysql
    linux下查找文件和文件内容
    记“debug alipay”一事
    OFBiz中根据店铺获取产品可用库存的方法
    ubuntu中安装eclipse
    ubuntu中安装jdk
    ubuntu14.04中解压缩window中的zip文件,文件名乱码的解决方法
    apache将请求转发到到tomcat应用
    网站不能访问的原因
    birt报表图标中文显示为框框的解决方法
  • 原文地址:https://www.cnblogs.com/MDGE/p/13468742.html
Copyright © 2011-2022 走看看