将参数传递给 redux 调度函数

Question

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

在下面的例子中，我想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}
   })
}

在减速器中，您将能够访问操作参数中的有效负载。