react redux

​

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);

​