React中使用useDispatch Hook如何实现类似connect的方法重命名

你可以通过以下两种常用方式实现和connect写法完全一致的重命名调用效果：

方式1：手动封装（适合少量action的场景） #

直接在组件内自定义重命名后的方法，内部调用dispatch触发原action即可：

import { useDispatch } from 'react-redux';
import { getAdminsList } from '你的action文件路径';

const 你的组件名 = () => {
  const dispatch = useDispatch();
  // 封装和connect里定义一致的重命名方法
  const getAdmins = (id) => dispatch(getAdminsList(id));

  // 调用时和之前props.getAdmins用法完全相同
  const 你的业务方法 = () => {
    getAdmins(123); // 直接传参调用即可
  };

  // 其余组件逻辑...
}

方式2：复用bindActionCreators（适合大量action批量绑定的场景） #

可以直接复用Redux自带的bindActionCreators工具，写法和原来connect第二个参数的写法几乎完全一致：

import { useDispatch } from 'react-redux';
import { bindActionCreators } from 'redux';
import { getAdminsList } from '你的action文件路径';

const 你的组件名 = () => {
  const dispatch = useDispatch();
  // 用法和connect里的bindActionCreators完全一样
  const { getAdmins } = bindActionCreators(
    {
      getAdmins: (id) => getAdminsList(id)
    },
    dispatch
  );

  // 调用方式不变
  const 你的业务方法 = () => {
    getAdmins(123);
  };

  // 其余组件逻辑...
}

两种方式实现的效果和之前connect高阶组件注入的getAdmins方法完全一致，你可以根据自己项目里action的数量选择对应的方案即可。

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