带有打字稿的mapDispatchToProps很难

Question

尝试使用typescript和redux构建一个简单的反应crud应用程序并运行到以下问题.我有一个具有指定签名的函数,它将一个person对象作为参数,如此处所示.

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))
      }
   }
);