React - 22 react-redux的基础运用

1.不再需要自己创建上下文对象了

react-redux内部自己创建了上下文对象，并且我们可以把store放在上下文中，在组件中使用的时候，无需我们自己再获取上下文中约store了，它可以帮我们获取到，我们直接玩即可! ! !

在组件中，我们想获取公共状态信息进行绑定等，无需自己基于上下文对象获取store，也无需自己再基于getState获取公共状态! !直接基于 react-redux 提供的 connect 函数处理即可! !而且，也不需要我们手动把让组件更新的方法，放在事件池中了，react-redux内部帮我们处理了! ! !

2.获取公共状态

Vote.jsx中

connect函数的语法

import React from "react";
import './Vote.less';
import VoteMain from './VoteMain';
import VoteFooter from './VoteFooter';
import { connect } from 'react-redux';

const Vote = function Vote(props) {
    let { supNum, oppNum } = props;
    return <div className="vote-box">
        <div className="header">
            <h2 className="title">React是很棒的前端框架</h2>
            <span className="num">{supNum + oppNum}</span>
        </div>
        <VoteMain />
        <VoteFooter />
    </div>;
};

export default connect(state => state.vote)(Vote);
/* export default connect(state => {
    return {
        supNum: state.vote.supNum,
        oppNum: state.vote.oppNum,
        num: state.vote.num
    }
})(Vote); */

/*
 connect(mapStateToProps,mapDispatchToProps)(我们要渲染的组件)
   1. mapStateToProps：可以获取到redux中的公共状态，把需要的信息作为属性，传递组件即可
    connect(state=>{
        // state:存储redux容器中，所有模块的公共状态信息
        // 返回对象中的信息，就是要作为属性，传递给组件的信息
        return {
            supNum:state.vote.supNum,
            info:state.personal.info
        };
    })(Vote);
 */

VoteMain.jsx

3.获取公共方法

VoteFooter.jsx中

简化写法 export default connect(null, action.vote)(VoteFooter)

import React from "react";
import { Button } from 'antd';
import action from "../store/actions";
import { connect } from 'react-redux';

const VoteFooter = function VoteFooter(props) {
    let { support, oppose } = props;
    return <div className="footer">
        <Button type="primary" onClick={support}>支持</Button>
        <Button type="primary" danger onClick={oppose}>反对</Button>
    </div >;
};
export default connect(
    null,
    action.vote
)(VoteFooter);

/* export default connect(
    null,
    dispatch => {
        return {
            support() {
                dispatch(action.vote.support());
            },
            oppose() {
                dispatch(action.vote.oppose());
            }
        };
    }
)(VoteFooter); */

/*
 connect(mapStateToProps,mapDispatchToProps)(我们要渲染的组件)
   2. mapDispatchToProps：把需要派发的任务，当做属性传递给组件
    connect(
        null,
        dispatch=>{
            // dispatch:store.dispatch 派发任务的方法

            // 返回对象中的信息，会作为属性传递给组件
            return {
                ...
            };
        }
    )(Vote);
 */