React Redux中如何将mapDispatchToProps替换为useDispatch钩子

问题分析 #

你的代码存在两个核心问题：

1. useSelector 被写在组件外部，违反了React Hooks只能在组件/自定义Hook内部调用的规则
2. 仍依赖connect和mapDispatchToProps，没有完全切换到函数组件的Redux Hooks写法

修改后的完整代码 #

import { useSelector, useDispatch } from 'react-redux';
// 确保已导入toggleDepartment这个action creator

interface DepartmentsFilterOwnProps {
  id?: GenericId;
  name?: string;
  productCount?: number;
  checkboxIconSize?: CheckboxIconsSize;
  className?: string;
}

// 精简Props类型，仅保留父组件需要传入的属性
export type DepartmentsFilterProps = DepartmentsFilterOwnProps;

export const DepartmentsFilter = ({
  id,
  name,
  productCount,
  checkboxIconSize,
  className,
}: DepartmentsFilterProps) => {
  // 1. 将useSelector移至组件内部，符合Hooks使用规则
  const activeDepartmentsIds = useSelector(getDepartmentsActiveIdsSelector);
  // 2. 用useDispatch获取dispatch函数
  const dispatch = useDispatch();

  // 3. 实现原mapDispatchToProps中的逻辑
  const onDepartmentChange = (departmentId: GenericId) => {
    dispatch(toggleDepartment(departmentId));
  };

  const isChecked = activeDepartmentsIds.indexOf(id) > -1;
  const onChangeCheckbox = () => {
    if (id) onDepartmentChange(id);
  };
  const isDisabled = !productCount;

  return (
    <P.FilterGroup className={className}>
      <P.Checkbox
        checked={isChecked}
        iconSize={checkboxIconSize}
        disabled={isDisabled}
        onChange={onChangeCheckbox}
      >
        {name}
        <SelectFilterParts.FilterProductCount> ({productCount})</SelectFilterParts.FilterProductCount>
      </P.Checkbox>
    </P.FilterGroup>
  );
};

// 4. 移除connect高阶组件，直接导出组件
export default DepartmentsFilter;

关键修改说明 #

• 精简类型定义：删除DepartmentsFilterStore和DepartmentsFilterActions接口，因为状态和动作逻辑已通过Hooks在组件内部处理，无需从props传入
• 修正Hooks位置：useSelector必须放在组件函数内部，遵循React Hooks的调用规则
• 替换mapDispatchToProps：通过useDispatch获取dispatch后，直接在组件内定义onDepartmentChange函数，逻辑和原mapDispatchToProps完全一致
• 简化事件处理：onChangeCheckbox直接调用内部定义的动作函数，去掉不必要的嵌套（也可保留原写法，按需选择）
• 移除connect：无需再用connect包裹组件，直接导出函数组件即可完成Redux连接

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