如何向Redux Dispatch传参？React-Bootstrap按钮传参至Reducer问题

嘿，我懂你的需求——给每个带专属bsName的自定义react-bootstrap Button组件，把这个属性传递到Redux reducer里对吧？核心思路就是在触发action的时候把bsName作为参数携带过去，下面我一步步给你拆解实现步骤：

1. 调整Action Creator，让它接收bsName参数 #

首先要让你的Redux action能够承载bsName信息，修改你的action文件：

// actions.js
export const handleButtonHover = (bsName) => ({
  type: 'BUTTON_HOVER',
  payload: { bsName } // 将bsName放入payload中传递给reducer
});

export const handleButtonLeave = (bsName) => ({
  type: 'BUTTON_LEAVE',
  payload: { bsName }
});

2. 修改mapDispatchToProps，支持传递动态参数 #

原来的mapDispatchToProps可能是直接绑定action，现在要改成返回可接收参数的函数，这样才能从组件拿到bsName：

// 你的组件文件中
import { handleButtonHover, handleButtonLeave } from './actions';

const mapDispatchToProps = (dispatch) => ({
  // 返回函数，等待组件触发事件时传入bsName
  onMouseEnter: (bsName) => dispatch(handleButtonHover(bsName)),
  onMouseLeave: (bsName) => dispatch(handleButtonLeave(bsName))
});

⚠️ 注意：不要直接写成dispatch(handleButtonHover(bsName))，那样会在组件初始化时就执行action，必须返回一个函数延迟执行。

3. 在自定义Button组件中传递bsName给事件回调 #

你的自定义Button组件需要接收bsName作为props，然后在鼠标事件触发时把它传给Redux的回调：

class CustomHoverButton extends React.Component {
  static propTypes = {
    bsName: PropTypes.string.isRequired,
    onMouseEnter: PropTypes.func.isRequired,
    onMouseLeave: PropTypes.func.isRequired
  };

  render() {
    // 解构出bsName和事件回调，剩下的props传给原生Button
    const { bsName, onMouseEnter, onMouseLeave, ...rest } = this.props;
    return (
      <Button
        {...rest}
        // 用箭头函数包裹，触发时传入当前按钮的bsName
        onMouseEnter={() => onMouseEnter(bsName)}
        onMouseLeave={() => onMouseLeave(bsName)}
      />
    );
  }
}

// 用connect连接组件和Redux
export default connect(null, mapDispatchToProps)(CustomHoverButton);

4. 在Reducer中接收并处理bsName #

现在你的reducer就能从action.payload中拿到bsName，进行对应的状态处理了：

// reducers.js
const initialState = {
  hoveredButtonNames: [] // 示例：存储当前处于hover状态的按钮名称
};

const buttonReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'BUTTON_HOVER':
      return {
        ...state,
        hoveredButtonNames: [...state.hoveredButtonNames, action.payload.bsName]
      };
    case 'BUTTON_LEAVE':
      return {
        ...state,
        hoveredButtonNames: state.hoveredButtonNames.filter(name => name !== action.payload.bsName)
      };
    default:
      return state;
  }
};

export default buttonReducer;

可选优化（针对性能敏感场景） #

如果你的按钮组件渲染频率极高，担心render里的箭头函数导致不必要的重渲染，可以用useCallback（函数组件）或者在class组件中提前绑定方法：

// 函数组件版本示例
import { useCallback } from 'react';

const CustomHoverButton = ({ bsName, onMouseEnter, onMouseLeave, ...rest }) => {
  // 用useCallback缓存回调函数
  const handleEnter = useCallback(() => onMouseEnter(bsName), [bsName, onMouseEnter]);
  const handleLeave = useCallback(() => onMouseLeave(bsName), [bsName, onMouseLeave]);

  return (
    <Button {...rest} onMouseEnter={handleEnter} onMouseLeave={handleLeave} />
  );
};

内容的提问来源于stack exchange，提问作者TrivialCase