react-redux connect方法

1.组件

react-redux把组件分为两类:UI组件和容器组件。

UI组件的特征:
  • 只负责 UI 的呈现,不带有任何业务逻辑
  • 没有状态(即不使用this.state这个变量)
  • 所有数据都由参数(this.props)提供
  • 不使用任何 Redux 的 API

下面展示一个UI组件:

import React,{Component} from 'react';

class Nav extends Component{
   
    render(){
        return <div>
            <div>
                <ul>
                    <li>首页</li>
                    <li>发布信息</li>
                    <li>个人中心</li>
                </ul>
            </div>
        </div>
    }
}
容器组件的特征:
  • 负责管理数据和业务逻辑,不负责 UI 的呈现
  • 带有内部状态
  • 使用 Redux 的 API

因此,UI 组件负责 UI 的呈现,容器组件负责管理数据和逻辑。

2.connect方法

react-redux提供connect()方法,从于从UI组件生成容器组件。

我使用画图软件CampTools画了connect()方法的概念图。

redux-connect connect()概念图

connect()有四个参数:mapStateToProps、mapDispatchToProps、mergeProps和options,我们一般常用的是mapStateToProps、mapDispatchToProps这两个参数。

connect方法在项目中的用法:

import {connect} from "react-redux";
import Login from "../components/login";

export default connect(mapStateToProps,mapDispatchToProps)(Login);

上面的代码中,我引入了react-redux中的connect方法,Login是我引入的项目中的UI组件。connect方法接受两个参数:mapStateToPropsmapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑,即将state映射到 UI 组件的参数(props),后者负责输出逻辑,即将用户对 UI 组件的操作映射成 Action。这样就创建了一个容器组件。

3.mapStateToProps()

这个函数允许我们将store中的数据作为props绑定到组件上。

const mapStateToProps = (state)=> {
    console.log('state',state);
     return {
         isRight:state.login.judge,
     }
};

上面代码中,mapStateToProps是一个函数,它接state作为参数,返回一个对象。这个对象有一个isRight属性,代表UI组件的同名参数。

mapStateToProps会监听 Store,每当state更新的时候,就会自动执行,重新计算 UI 组件的参数,从而触发 UI 组件的重新渲染。

mapStateToProps的第一个参数总是state对象,还可以使用第二个参数,代表容器组件的props对象。

使用ownProps作为参数后,如果容器组件的参数发生变化,也会引发 UI 组件重新渲染。
connect方法可以省略mapStateToProps参数,那样的话,UI 组件就不会监听Store,就是说 Store 的更新不会引起 UI 组件的更新。

4.mapDispatchToProps()

connect 的第二个参数是 mapDispatchToProps,它的功能是,用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说,它定义了哪些用户的操作应该当作 Action,传给 Store。

如果mapDispatchToProps是一个对象,它的每个键名也是对应 UI 组件的同名参数,键值应该是一个函数,会被当作 Action creator ,返回的 Action 会由 Redux发出。

const mapDispatchToProps = (dispatch) => {
   return {
       onJudge:(data)=>{
           dispatch({type:"LOGIN",data});
       }
   }
};

上面的代码中,mapDispatchToProps返回一个对象,该对象的每个键值对都是一个映射,定义了 UI 组件的同名参数怎样发出 Action。

如果mapDispatchToProps是一个函数,会得到dispatch和ownProps(容器组件的props对象)两个参数。上面的代码写成函数就是如下示例:

const mapDispatchToProps = (
  dispatch,
  ownProps
) => {
  return {
    onJudge: () => {
      dispatch({
        type: 'LOGIN',
        data
      });
    }
  };
}

想要更详细的了解,可看项目完整代码:https://github.com/second-Sale/second-sale

推荐阅读更多精彩内容