zoukankan      html  css  js  c++  java
  • React-Redux之connect

    connect函数是连接React组件和Redux  Store,连接操作过程中不会改变原来的组件,而且返回一个已经与Store连接的新组件。

    connect常见的两个参数:

    1、mapStateToProps(state,[ownProps]),在定义该函数时,组件会监听Store的变化,只要Store发生变化,mapStateToProps函数就会被调用并且必须返回一个纯对象,该对象会和组件的Props合并。mapStateToProps的参数ownProps。表示传递到组件的Props,也就是每次更新Store状态,它接受整个存储状态并且返回一个该组件需要的数据对象。

    2、mapDispatchToProps(dispatch,[ownProps]);该参数可以是函数也可以是对象。若是对象的话,那每次定义在该组件上的函数都被当作Redux  action creator,对象定义的方法名作为属性名,每个每个方法都会返回一个新函数,函数中的dispatch方法会把action Creator的返回值作为参数执行,这个参数被合并到组件的props中去。若是一个函数的话,那么在创建组件时调用一次,把dispatch作为参数执行然后再返回一个对象,该对象通过dispatch函数与action Creator以某种方式绑定一起,如果忽略mapDispatchToProps参数,dispatch默认会注入到组件的props中。

    const  mapStateToProps = (state,ownProps) => ({})
    const  mapDispatchToProps = {}
    connect(mapStateToProps,mapDispatchToProps)(component)
    connect四种连接方式
      不订阅Store 订阅Store
    不注入action creator

    connect()(Component)

    Store发生变化时,不重新呈现,

    接受到的props.dispatch用在手动调度action

    connect(mapStateToProps)(Component)

    订阅的napStateToProps从商店中提取值,并且仅仅用在这些值发生改变时重新渲染

    接受到的props.dispatch用在手动调度action

    注入action creator

    connect(null,mapDispatchToProps)(Component)

    Store发生变化时,不重新呈现

    把接收到的mapDispatchProps注入action creator作为props,

    并且在调用时自动发送action操作

    connect(mapStateToProps,mapDispatchToProps)(Component)

    订阅的napStateToProps从商店中提取值,并且仅仅用在这些值发生改变时重新渲染

    把接收到的mapDispatchProps注入action creator作为props,

    并且在调用时自动发送action操作



  • 相关阅读:
    页面布局的一些心得
    EverNote自定义模板
    运行时创建类的小问题
    测试窗体只能用于来自本地计算机的请求
    VS2010技巧:如何在js文件中使用jQuery智能感知
    让SQL Server Compact支持 Membership, Role and Profile provider
    MVC3返回一个或者多个数据集的方法
    NuGet使用方法
    mvc@helper 的用法和作用
    LINQ to Entities 不识别方法"System.String ToString()"
  • 原文地址:https://www.cnblogs.com/duxingdexin/p/10196197.html
Copyright © 2011-2022 走看看