带有打字稿的 mapDispatchToProps 很困难

Question

尝试使用 typescript 和 redux 构建一个简单的 react crud 应用程序并遇到以下问题。我有一个具有指定签名的函数，它将把一个人对象作为参数，如此处所示。

export default function savePerson(person: Person) {
    return async (dispatch: any) => {
        let newPerson = await axios.post('/api/people/addPeron', person);
        dispatch(addPersonSuccess(person));
    }
}

现在，当我尝试将组件连接到 redux 时，mapDispatchToProps 出现问题。这是我的代码。

function mapDispatchToProps(dispatch: any) {
  const actions = {
    savePerson: () => dispatch(savePerson())
  }
  return actions;
}

问题是 savePerson 函数需要一个人传递给它，但是我无法访问 mapDispatchToProps 中的状态，并且由于该函数缺少参数，我的代码无法编译。有什么想法吗？

使用解决方案编辑：

这是使该代码工作所需的一项更改的代码。

function mapDispatchToProps(dispatch: any) {
  const actions = {
    savePerson: (person: Person) => dispatch(savePerson(person))
  }
  return actions;
}

我只需要将 person 对象传递给调用 dispatch 的匿名函数。

Answer 1

import { AnyAction } from "redux";
import { ThunkDispatch } from "redux-thunk";
import { savePerson } from "../myActions";

// IExtraDispatchArguments usually is empty
import { IExtraDispatchArguments, IStoreState } from "../myGlobalTypes"

interface IMyComponentProps {
    savePerson: (person: Person) => Promise<void>;
}
class MyComponent extends React.Component<IMyComponentProps, void>{
    someMethod(person: Person) {
        this.actions.savePerson(person);
    }
}

const WrappedComponent = connect(
   (state: IStoreState, ownProps: {}) => ({
       // here you can map state
   }),
   (dispatch: (dispatch: ThunkDispatch<IStoreState, IExtraDispatchArguments, AnyAction>)) => ({
      // savePerson: (person: Person) => dispatch(savePerson(person))
      actions: {
         savePerson: (person: Person) => dispatch(savePerson(person))
      }
   }
);