reduxquestion.jsx

import React, {Component} from 'react'
import {connect} from 'react-redux'
import {addFoo} from '../actions/foo'

class MyComponent extends Component {
  static defaultProps = {
    foos:[]
  }
  
  state = {
    foo: ''
  }
  
  handleChange = (e) => {
    this.setState({
      [e.target.name]:e.target.value
    })
  }
  
  handleSubmit = (e) => {
    e.preventDefault()
    // HERE IS WHERE MY QUESTION STARTS
    // Why do this:
    this.props.dispatch(addFoo(this.state.foo))
    // Instead of this:
    addFoo(this.state.foo)
    // and simply use store.dispatch() inside of of the addFoo
    // function within the actions file?
  }
  
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input type="text" name="foo" value={this.state.foo} />
          <button type="submit">Add new foo</button>
        </form>
        <ul>
          {this.props.foos.map(foo => (
            <li>{foo}</li>
          ))}
        </ul>
      </div>
    )
  }
  
}

function stateToProps (state) {
  return {
    foos: state.foos
  }
}

export default connect(stateToProps)(MyComponent)