react @connect

import React from 'react';
import { connect } from 'react-redux'
import {add_A,rem_R,addAsync} from './index.redux.js'


/**没使用@conncet注解方式之前的实现
 * 接收store赋值给组件内部的props
 * const mapStatetoProps = (state) =>{
 *     return {num:state}
 *}
 *将store当中的所有的actionCreator放入actionCreators
 *const actionCreators = {add_A,rem_R,addAsync}
 *将App传入connect当中 将所有的函数和参数都给到App 生成一个新的App 组件内部通过this.props即可获取 传入的参数和方法
 *App = connect(mapStatetoProps,actionCreators)(App)
 */



//使用注解的方式修改state和组件之间的传值
@connect(
    //你需要state当中的什么参数 取出来就会放到props相对的参数当中
    state=>({num:state}),
    //你需要state当中的什么方法就可以写到下面的大括号中就能被放到props当中 并且会自动dispatch
    {add_A,rem_R,addAsync}
)
 class App extends React.Component{
    constructor(props){
        super()
    }
    render(){
        return (
            <div>
                <h1>现在是数字几{this.props.num}</h1>
                {/*使用了connect之后这里不需要在手动的dispatch了直接调用即可*/}
                <button onClick={this.props.add_A}>加</button>
                <button onClick={this.props.rem_R}>减</button>
                {/*这里点击完成之后就会触发异步方法 在两秒之后更新*/}
                <button onClick={this.props.addAsync}>等两秒再加</button>
             </div>
        )
    }
}

export default App