redux chess components

square + container

// square container

import React from 'react'
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actions from '..path to your actions/index.js'

class SquareContainer extends React.Component {
  triggerClickActions(e) {
    e.preventDefault();
    this.props.actions.updateCoordinate()
    this.props.actions.incrementStore()
  }
  render() {
    return (
      <Square onSquareClick={this.triggerClickActions.bind(this)}
    )
  }
}

function mapStateToProps(state) {
  // whatever you need to do in here, idk
}

function mapDispatchToProps(dispatch) {
  return {actions: bindActionCreators(actions, dispatch)}
}

export default connect(mapStateToProps, mapDispatchToProps)(SquareContainer)

// what this does is:
// use bindActionCreators to iterate over all of your action creator functions and
//  wrap each one in a call to dispatch
// THEN create a property of your component's `props`, called `actions`. `actions` is
// an object with keys named for each action creator function, value of those actual functions
// SO you can invoke those action creator functions like this from inside your component:
// `this.props.actions.myAction()`. and it will dispatch it for you. 

// secondly, we are creating a function, `triggerClickActions`, that, when fired, will dispatch our
// actions. We pass it into the Square component, setting it equal to a prop on Square called `onSquareClick`.
// when we pass it in as this prop, we have to bind `this`.

// Square component

const Square = (props) => {
  function squareClick(e) {
    e.preventDefault();
    this.props.onSquareClick();
  }
   return (
      <div onClick={squareClick} />
    )
    }
}