​

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {actions} from './_index.js';

class View extends Component {
    constructor(props){

        super(props);
        // const { dispatch } = props;
        // this.boundActions = bindActionCreators(actions, dispatch);
    }
    lists(){
        const list = this.props.data.map((val,key)=>{
            return(
                <li key={key}>
                       <span>{val.text}</span>
                </li>
            )
        })
        return list;
    }
    test(){
        // connect(mapStateToProps,null)(View);
        // 只有第二個引數 為空時  才 可以直接使用this.props 否則頁面無法獲取
        // const {dispatch} = this.props;
        // dispatch(actions.add('id'))
        console.log(this.props)
    }
    componentDidMount(){
        this.test()
    }
    render(){
        const { onAdd ,data} = this.props;

        // console.log(data)
        return(
            <React.Fragment>
                <div onClick={onAdd}>點我點</div>
                <div onClick={()=>{this.test()}}>點我點</div>
                <ul>{data.length!==0 ? this.lists() : ''}</ul>

            </React.Fragment>
        )
    }
}

//需要渲染什麼資料
//作為函式，mapStateToProps執行後應該返回一個物件
function mapStateToProps(state) {
  return {
      data:state.first
  }
}
//是一個函式，會得到dispatch和ownProps（容器元件的props物件）兩個引數。
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        onAdd: () => dispatch(actions.add('id'))
    }
};
export default connect(mapStateToProps,mapDispatchToProps)(View);


    ```

```jsx
import React, { Component } from 'react';
import {connect} from 'react-redux';
import {actions} from './_index.js';

class View extends Component {
    constructor(props){

        super(props);
        // const { dispatch } = props;
        // this.boundActions = bindActionCreators(actions, dispatch);
    }
    lists(){
        const list = this.props.data.map((val,key)=>{
            return(
                <li key={key}>
                       <span>{val.text}</span>
                </li>
            )
        })
        return list;
    }
    test(){
        // connect(mapStateToProps,null)(View);
        // 只有第二個引數 為空時  才 可以直接使用this.props 否則頁面無法獲取
        const {dispatch} = this.props;
        dispatch(actions.add('id'))
        console.log(this.props)
    }
    componentDidMount(){
        this.test()
    }
    render(){
        const { onAdd ,data} = this.props;

        // console.log(data)
        return(
            <React.Fragment>
                <div onClick={onAdd}>點我點</div>
                <div onClick={()=>{this.test()}}>點我點</div>
                <ul>{data.length!==0 ? this.lists() : ''}</ul>

            </React.Fragment>
        )
    }
}

//需要渲染什麼資料
//作為函式，mapStateToProps執行後應該返回一個物件
function mapStateToProps(state) {
  return {
      data:state.first
  }
}
//是一個函式，會得到dispatch和ownProps（容器元件的props物件）兩個引數。
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        onAdd: () => dispatch(actions.add('id'))
    }
};
export default connect(mapStateToProps,null)(View);
 

​