ريأكت جي إس - mapDispatchToProps مع تايب سكريبت صعبة

محاولة بناء تطبيق CRUD بسيط باستخدام React مع TypeScript و Redux وواجهت المشكلة التالية. لدي دالة لها التوقيع المحدد أنها ستأخذ كائن شخص كوسيط كما هو موضح هنا.

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

كان علي فقط تمرير كائن الشخص إلى الدالة المجهولة الخاصة بي التي تستدعي dispatch.

الإجابة رقم 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))
      }
   }
);