react-redux之connect和Provider组件

在redux的学习中，个人觉得connect（）函数是redux中的难点。所以想结合Provider 组件来总结一下。（如果大家对redux还没有一个整体的了解，还不建议直接看下去）
1、react-redux的状态管理方式是什么？

在react-redux中，使用Provider注入store，store是我们创建的用于状态管理的容器。使用方式就是：
js/index.js

**import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { render } from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

import App from '../containers/App';

import todoApp from './reducers';


let store = createStore(todoApp);

console.log('store',store);
render(<Provider store={store}><App /></Provider>,document.getElementById('root'));**
   
   
    
    1
    
    2
    
    3
    
    4
    
    5
    
    6
    
    7
    
    8
    
    9
    
    10
    
    11
    
    12
    
    13
    
    14
    
    15

在这里，引入createStore创建store，然后在Provider组件的属性中注入store，其中Provider是react-redux提供的一个组件。

注入Provider组件中，我们就能在它的子组件中获取我们注入的东西，但是这个获取的方式就是通过connect（）函数。
一个组件的状态的改变，必须connect之后才能进行状态管理。我看到有人这么形容connect，非常形象—（利用Provider组件把store注入进来，我们只能通过store来进行数据管理，任何组件如果想要进行交互，必须connect进来这个容器中，这个connect提供了方法让你传递数据和dispatch），connect的使用方式就是：
containers/App.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import { addTodo, completeTodo, setVisibilityFilter, VisibilityFilters, increase, decrease } from '../js/actions';

import { bindActionCreators } from 'redux';



class App extends Component {

    render() {
        const {value, increase, decrease} = this.props;

        return (
            <div>
                <p>计数：{value}次</p>
                <button onClick={increase}>increase</button>
                <button onClick={decrease}>decrease</button>
            </div>
        )
    }
}
const mapStateToProps = (state)=>{
    console.log('state',state);
    return {
        todos: state.todos,
        visibilityFilter: state.visibilityFilter,
        value: state.value
    }
}
const mapDispatchToProps = (dispatch, ownProps) => {

    return bindActionCreators({
        increase: () => dispatch(increase()),
        decrease: () => dispatch(decrease())
    })
}

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


   
   
    
    1
    
    2
    
    3
    
    4
    
    5
    
    6
    
    7
    
    8
    
    9
    
    10
    
    11
    
    12
    
    13
    
    14
    
    15
    
    16
    
    17
    
    18
    
    19
    
    20
    
    21
    
    22
    
    23
    
    24
    
    25
    
    26
    
    27
    
    28
    
    29
    
    30
    
    31
    
    32
    
    33
    
    34
    
    35
    
    36
    
    37
    
    38
    
    39
    
    40
    
    41
    
    42
    
    43

这里的App就是定义的UI组件，然后export default connect（）（App）就实现了对接。

对接之后就要进行数据传递和dispatch，所以看到了connect的两个参数mapStateToProps和mapDispatchToProps。
这是两个函数，承载不同的功能，接下来给大家介绍。

2、connect函数的第一个参数：mapStateToProps（state，ownProps）

这个函数的作用就是把你需要的数据转换为props提供给你的ui组件使用。返回的是一个对象。

state就是提供给我们的默认数据，用来渲染UI组件的数据。console.log（state）发现state是一个对象。
这里写图片描述

这个对象中的数据就是我们用于渲染界面使用的东西。

ownerProps这个参数主要是组件自己的数据。

3、connect函数的第二个参数mapDispatchToProps（dispatch，ownProps）

和第一个传入的state不同的是，第二个用作参数的函数传入的是一个dispatch，用于把UI组件发生的action动作dispatch出去。它返回的也是一个对象。

const mapDispatchToProps = (dispatch, ownProps) => {

    return bindActionCreators({
        increase: () => dispatch(increase()),
        decrease: () => dispatch(decrease())
    })
}
   
   
    
    1
    
    2
    
    3
    
    4
    
    5
    
    6
    
    7

完!
完整的demo的github地址connect-demo

react-redux之connect和Provider组件

猜你喜欢