react-redux中的connect方法解析

2017-05-12 本文已影响0人杨慧莉

connect()是react-redux中的核心方法之一，它将react组件预redux中的Store真正连接在一起

组件

React-Redux将所有组件分为两大类：展示组件（UI组件），容器组件

展示组件有以下几个特征：

只负责 UI 的呈现，不带有任何业务逻辑
没有状态（即不使用this.state这个变量）
所有数据都由参数（this.props）提供
不使用任何 Redux 的 API

容器组件有以下几个特征：

负责管理数据和业务逻辑，不负责 UI 的呈现
带有内部状态
使用 Redux 的 API

总结为一点：** 展示组件负责 UI 的呈现，容器组件负责管理数据和逻辑**

connect方法解析

下图是connect()的概念图

react-redux connect - connect是什么.jpg

connect（）签名
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

参数

[mapStateToProps(state, [ownProps]): stateProps] (Function):

mapStateToProps必须是一个Function,作用是绑定state的指定值到props上
state: 监听Redux store的变化。任何时候只要 Redux store发生改变，mapStateToProps 函数就会被调用,该回调函数必须返回一个纯对象，该对象会与相应展示组件的 props 合并。
ownProps: 该参数的值为传递到组件的 props，而且只要组件接收到新的props，mapStateToProps 也会被调用

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function)

mapDispatchToProps可以是一个Function，也可以是Object,作用是绑定action创建函数到props上
dispatch:
- 如果传递的是一个对象，那么每个定义在该对象的函数都将被当作Redux action creator，而且这个对象会与 Redux store绑定在一起，其中所定义的方法名将作为属性名，合并到组件的 props 中;
- 如果传递的是一个函数，该函数将接收一个 dispatch 函数，然后由你来决定如何返回一个对象，这个对象通过 dispatch 函数与 action creator 以某种方式绑定在一起

关于connect（）签名的详细解释可以看API文档

connect（）实例

以计数器为例

component/count.js


import React, { Component } from 'react'

class Counter extends Component {

    increment(){
     this.props.onAdd();
    }

    decrement(){
       this.props.onCut();
    }

    render() {
        return (
            <p>
                Clicked: {this.props.counter} times
                {' '}
                <button onClick={this.increment.bind(this)}>+</button>
                {' '}
                <button onClick={this.decrement.bind(this)}>-</button>
            </p>
        )
    }
}

export default Counter;

containers/count.js

import {connect} from 'react-redux'
import Counter from '../component/count'


//将state绑定到props的counter
const mapStateToProps = (state)=> {
    console.log(state);
    return {
        counter: state
    }
};
//将action的所有方法绑定到props上
const mapDispatchToProps = (dispatch) => {
    return {
        onAdd: ()=> {
            dispatch({type: "INCREMENT_COUNTER"});
        },
        onCut: ()=> {
            dispatch({type: "DECREMENT_COUNTER"});
        }
    };
};

//通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到props上

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

reducers/count.js

import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions/count'

//reducer其实也是个方法而已,参数是state和action,返回值是新的state
export default function counter(state = 0, action) {
    switch (action.type) {
        case INCREMENT_COUNTER:
            return state + 1;
        case DECREMENT_COUNTER:
            return state - 1;
        default:
            return state
    }
}

详细代码请看：https://github.com/yhl221/react-redux-counter
更多示例请看：React+Redux系列教程

参考资料：
https://segmentfault.com/a/1190000006196949
http://cn.redux.js.org/docs/react-redux/api.html
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
http://www.cnblogs.com/lewis617/p/5145073.html
http://www.cnblogs.com/hhhyaaon/p/5863408.html
源码解析：https://my.oschina.net/997155658/blog/709155

react-redux中的connect方法解析

组件

connect方法解析

connect（）实例

猜你喜欢

热点阅读