• react依赖注入之mapStateToProps&&mapDispatchToProps


    今天看前辈写的代码,看到mapStateToProps&&mapDispatchToProps处,不明白,于是又是各种找资料,在CSDN博客中发现一篇好文,摘抄到此,方便自己阅读!

    原文如下:http://blog.csdn.net/genius_yym/article/details/64130120

    在react-redux开发中每个模块有自己的state用来统一管理视图数据

    (1)将需要的state的节点注入到与此视图数据相关的组件上

            使用 React Redux 库的 connect() 方法来生成容器组件前,需要先定义 mapStateToProps 这个函数来指定如何把当前 Redux store state 映射到展示组件的 props 中。

     

    (2)将需要绑定的响应事件注入到组件上

            除了读取 state,容器组件还能分发 action。类似的方式,可以定义mapDispatchToProps() 方法接收 dispatch() 方法并返回期望注入到展示组件的 props 中的回调方法。它可以是一个函数,也可以是一个对象。如果mapDispatchToProps是一个函数,会得到dispatch和ownProps(容器组件的props对象)两个参数。

     
     

    (3)统筹mapStateToProps和mapDispatchToProps

     

    最后,说一下react-redux开发的基本结构。

    开发环境调用后台路径配置:`proxy.config.js`文件下可以自由定义接口调用到的后台地址,业务模块不要出现应用路径(BackGround);各个模块目录下:- api.js定义与后台交互的接口方法- action.js定义页面操作触发的动作(eg. 点击查询按钮)- reducer.js定义触发动作后的影响(eg. 查询完成后将查询结果set回state,视图自动刷新)

    补充:自己项目实例(aec-app):

     
  • 相关阅读:
    vue 组件之间相互传值 父传子 子传父
    krpano 常用标签
    krpano生成全景图
    github的基本使用
    transform:rotate3d/tranlate3d
    css3水波纹效果
    原型的迷惑
    JS变量作用域
    LeetCode Rotate List
    LeetCode Divide Two Integers
  • 原文地址:https://www.cnblogs.com/weizhxa/p/11689933.html
Copyright © 2020-2023  润新知