深刻理解react-redux

1、react-redux做用

react-redux的做用就是将react与redux链接起来,将redux中的store传递到react组件中

2、关于展现组件与容器组件的对比

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

总结一点:展现组件就是react,容器组件是redux链接react的

3、react-redux的使用

• 一、安装

  npm install react-redux --save

• 二、react-redux中使用到的方法

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

    <Provider store={store}>
    ...容器组件
    </Provider>

  • 二、connect将容器组件链接到展现组件中,进行数据的传递

    //connect是一个柯里化函数 
    export default connect(xxx)(展现组件)

• 三、通常咱们利用redux开发react项目常见的项目目录

4、深刻理解connect

• 一、connect源码

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

  ...
  return function connect(mapStateToProps, mapDispatchToProps, mergeProps) {
  ...
  }
  ...

  • 一、mapStateToProps是一个(函数类型),接收一个完整的redux状态树做为参数,返回当前展现组件须要的状态树,返回的key会当作props传递到展现组件。
  • 二、mapDispatchToProps是一个(对象或者函数类型),接收一个完整的redux的dispatch方法做为参数,返回当前组件相关部分的或者所有的的action
  • 三、mergeProps是一个(函数类型),若是指定这个函数,分别得到mapStateToProps、mapDispatchToProps返回值以及当前组件的props做为参数

• 二、mapStateToProps(state,[ownProps])的解析

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

  • 一、state返回的参数做为props传递到展现组件
  • 二、ownProps表示当前容器组件中的属性

• 三、关于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);

5、关于connect的写法

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

• 二、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);

• 三、直接使用装饰器(不须要单首创建容器组件) 配置ES7的开发环境

  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;
          ....
      }

6、代码下载地址demo