import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function addTodo (task) {
  return {type:"ADD",payload:task}
}

class App extends Component {
  state = {
    task: '',
  }

  handleChange(e) {
    this.setState({task:e.target.value})
  }

  render() {
    return (
      <div className="App">
        <input type='text' value={this.state.task} onChange = {(e) => this.handleChange(e)}/>
        <button type='button' onClick={()=>this.props.addTodo(this.state.task)} >Add</button>
        <div>{this.props.todos.map(task => (<h1>{task}</h1>))}</div>
      </div>
    );
  }
}

function mapStateToProps (state) {
  return {
    todos:state.todos
  }
}

export default connect(mapStateToProps,{ addTodo })(App);