将参数传递给redux调度函数

Question

我想构建一些按钮（来自react-bootstrap按钮），这些按钮知道何时鼠标光标进入并离开它们。 连接起来没问题，一切正常。 但是，如果我有几个这样的按钮，并且每个按钮都有一个传递给它的名称，那么如何将名称输入到reducer中？

在下面的示例中，我希望将bsName传递给reducer，来看看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);

Answer 1

您应该在这里适当地利用闭包，而不是直接调度，而是调用闭包方法，该方法将接收按钮的名称，然后将该名称添加到有效负载中。

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

在reducer中，您将能够访问action参数中的有效负载。