Components/slot.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { selectSlot } from "../Action/action";
class Slots extends Component {
  handleSlot = id => {
    this.props.selectSlot(id);
  };

  render() {
    // Template for each slot
    // <div key={slot.id} className="slot_list">
    //   <h4>
    //     <span
    //       className={slot.slotStatus}
    //       style={{ cursor: "pointer" }}              
    //     >

    //     </span>
    //   </h4>
    // </div>

    return (<div>
      {/* code for slot goes here */}
    </div>);
  }
}

const mapStateToProps = state => {
  return {
    selectedGame: state.selectedGame,
    bookingSlot: state.slotBooked
  };
};
const mapDispatchToProps = dispatch => {
  return {
    selectSlot: id => dispatch(selectSlot(id))
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Slots);