博客
关于我
深入理解react-redux
阅读量:133 次
发布时间:2019-02-26

本文共 2210 字,大约阅读时间需要 7 分钟。

一、react-redux作用

react-redux的作用就是将reactredux连接起来,将redux中的store传递到react组件中

二、关于展示组件与容器组件的对比

展示组件 容器组件
目的 展现在页面
是否感知redux
要获取数据 this.props
要改变数据 调用props中传入的action
创建者 开发人员

总结一点:展示组件就是react,容器组件是redux连接react

三、react-redux的使用

  • 1、安装

    npm install react-redux --save
  • 2、react-redux中使用到的方法

    • 1、Provider实质上就是将store传递到容器组件,容器组件又传递数据到展示组件

      ...容器组件
    • 2、connect将容器组件连接到展示组件中,进行数据的传递

      //connect是一个柯里化函数    export default connect(xxx)(展示组件)
  • 3、一般我们利用redux开发react项目常见的项目目录

    这里写图片描述

四、深入理解connect

  • 1、connect源码

    connect函数传递三个参数,实际开发中一般都是传入前2个参数

    ...return function connect(mapStateToProps, mapDispatchToProps, mergeProps) {     ...}...
    • 1、mapStateToProps是一个(函数类型),接收一个完整的redux状态树作为参数,返回当前展示组件需要的状态树,返回的key会当做props传递到展示组件。
    • 2、mapDispatchToProps是一个(对象或者函数类型),接收一个完整的reduxdispatch方法作为参数,返回当前组件相关部分的或者全部的action
    • 3、mergeProps是一个(函数类型),如果指定这个函数,分别获得mapStateToPropsmapDispatchToProps返回值以及当前组件的props作为参数
  • 2、mapStateToProps(state,[ownProps])的解析

    第一个参数是必填的,第二个参数是选填的

    • 1、state返回的参数作为props传递到展示组件
    • 2、ownProps表示当前容器组件中的属性
  • 3、关于mapStateToProps的代码

    import {connect} from 'react-redux';import * as ActionCreators from './../actions';import Counter from './../components/Counter';export default connect(    /**     * 解析:mapStateToProps(state),返回一个counter以props传递给Counter组件中     * 关于state.counter1的解析,请参考下面的反向查找流程图     */    (state) =>({counter:state.counter1}),    ActionCreators)(Counter);

    这里写图片描述

五、关于connect的写法

  • 1、mapStateToProps是函数mapDispatchToProps是对象(代码见上面)
  • 2、mapStateToProps是函数mapDispatchToProps也是函数

    import {connect} from 'react-redux';import Counter from './../components/Counter';import {onIncrement,onDecrement,incrementIfOdd,incrementAsync} from './../actions';export default connect(    state =>({counter:state.counter1}),    dispatch =>({        onIncrement:()=>dispatch(onIncrement())    }))(Counter);
  • 3、直接使用装饰器(不需要单独创建容器组件)

    import {connect} from 'react-redux';import React, {Component} from 'react';import * as ActionCreators from './../actions';@connect(    state =>({counter:state.counter1}),    ActionCreators)export default class Counter extends Component {    constructor(props) {        super(props);    }    render() {        const {counter,onIncrement,onDecrement,incrementIfOdd,incrementAsync} = this.props;        ....    }

六、代码下载地址

你可能感兴趣的文章
MySQL 数据类型和属性
查看>>
mysql 敲错命令 想取消怎么办?
查看>>
Mysql 整形列的字节与存储范围
查看>>
mysql 断电数据损坏,无法启动
查看>>
MySQL 日期时间类型的选择
查看>>
Mysql 时间操作(当天,昨天,7天,30天,半年,全年,季度)
查看>>
MySQL 是如何加锁的?
查看>>
MySQL 是怎样运行的 - InnoDB数据页结构
查看>>
mysql 更新子表_mysql 在update中实现子查询的方式
查看>>
MySQL 有什么优点?
查看>>
mysql 权限整理记录
查看>>
mysql 权限登录问题:ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘ (using password: YES)
查看>>
MYSQL 查看最大连接数和修改最大连接数
查看>>
MySQL 查看有哪些表
查看>>
mysql 查看锁_阿里/美团/字节面试官必问的Mysql锁机制,你真的明白吗
查看>>
MySql 查询以逗号分隔的字符串的方法(正则)
查看>>
MySQL 查询优化:提速查询效率的13大秘籍(避免使用SELECT 、分页查询的优化、合理使用连接、子查询的优化)(上)
查看>>
mysql 查询,正数降序排序,负数升序排序
查看>>
MySQL 树形结构 根据指定节点 获取其下属的所有子节点(包含路径上的枝干节点和叶子节点)...
查看>>
mysql 死锁 Deadlock found when trying to get lock; try restarting transaction
查看>>