I want to build some buttons (from react-bootstrap Buttons) that know when the mouse cursor has entered and left them. No problem with hooking this up, and I get everything to fire just fine. However, if I have several such buttons, and each gets a name passed down to it, how do I get the name into the reducer?

In the following example, I want bsName to be passed to the reducer, take a peek at mapsDispatchToProps:

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Button } from 'react-bootstrap';

const InteractiveButton = ({
  bsStyle,
  bsName,
  bsText,
  dispButtonEnter,
  dispButtonLeave
}) => (
  <div>
    <Button
      onMouseEnter={dispButtonEnter}
      onMouseLeave={dispButtonLeave}
      bsStyle={bsStyle}
      bsSize="large"
      title={bsName}
      block
    >
      {bsText}
    </Button>
  </div>
);

InteractiveButton.propTypes = {
  bsStyle: PropTypes.string.isRequired,
  bsName: PropTypes.string.isRequired,
  bsText: PropTypes.string.isRequired,
  dispButtonEnter: PropTypes.func.isRequired,
  dispButtonLeave: PropTypes.func.isRequired
};

const dispButtonEnter = { type: 'BUTTON_MOUSE_ENTER' };
const dispButtonLeave = { type: 'BUTTON_MOUSE_LEAVE' };

function mapStateToProps() {
  return {};
}

function mapDispatchToProps(dispatch) {
  return {
    dispButtonEnter: e => dispatch({
      ...dispButtonEnter,
      buttonName: bsName <<<<<<<<<<<<<<<<<<<<<<<< something like this, but functioning
      buttonEnterTarget: e.relatedTarget
    }),
    dispButtonLeave: e => dispatch({
      ...dispButtonLeave,
      buttonName: bsName <<<<<<<<<<<<<<<<<<<<<<<< something like this, but functioning
      buttonLeaveTarget: e.relatedTarget
    })
  };
}

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

I want to build some buttons (from react-bootstrap Buttons) that know when the mouse cursor has entered and left them. No problem with hooking this up, and I get everything to fire just fine. However, if I have several such buttons, and each gets a name passed down to it, how do I get the name into the reducer?

In the following example, I want bsName to be passed to the reducer, take a peek at mapsDispatchToProps:

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Button } from 'react-bootstrap';

const InteractiveButton = ({
  bsStyle,
  bsName,
  bsText,
  dispButtonEnter,
  dispButtonLeave
}) => (
  <div>
    <Button
      onMouseEnter={dispButtonEnter}
      onMouseLeave={dispButtonLeave}
      bsStyle={bsStyle}
      bsSize="large"
      title={bsName}
      block
    >
      {bsText}
    </Button>
  </div>
);

InteractiveButton.propTypes = {
  bsStyle: PropTypes.string.isRequired,
  bsName: PropTypes.string.isRequired,
  bsText: PropTypes.string.isRequired,
  dispButtonEnter: PropTypes.func.isRequired,
  dispButtonLeave: PropTypes.func.isRequired
};

const dispButtonEnter = { type: 'BUTTON_MOUSE_ENTER' };
const dispButtonLeave = { type: 'BUTTON_MOUSE_LEAVE' };

function mapStateToProps() {
  return {};
}

function mapDispatchToProps(dispatch) {
  return {
    dispButtonEnter: e => dispatch({
      ...dispButtonEnter,
      buttonName: bsName <<<<<<<<<<<<<<<<<<<<<<<< something like this, but functioning
      buttonEnterTarget: e.relatedTarget
    }),
    dispButtonLeave: e => dispatch({
      ...dispButtonLeave,
      buttonName: bsName <<<<<<<<<<<<<<<<<<<<<<<< something like this, but functioning
      buttonLeaveTarget: e.relatedTarget
    })
  };
}

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

• javascript
• reactjs
• redux
• event-handling

• What’s in your reducer? – jpdelatorre Commented Apr 16, 2018 at 0:39
• as @jpdelatorre asked, this could be solved with adding the key to your reducer – Rei Dien Commented Apr 16, 2018 at 1:17

1 Answer 1

You should utilize closures properly here don't just dispatch directly instead make the call to the closure method that will receive the the name of button and then add that name in the payload.

closureFunction(btnName){
   dispatch({
      ...dispButtonEnter,
      payload:{name: btnName}
   })
}

In reducer you will be able to access the payload in action argument.