javascript - Passing an argument to redux dispatch function - Stack Overflow

admin管理员组

文章数量:1398755

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

Share Improve this question Follow asked Apr 16, 2018 at 0:31 TrivialCaseTrivialCase 1,09922 gold badges1515 silver badges3333 bronze badges 2

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.

本文标签： javascriptPassing an argument to redux dispatch functionStack Overflow