web-dev-qa-db-fra.com

mapDispatchToProps avec TypeScript est difficile

Essayer de construire une application simple de réagir crud avec TypeScript et redux et a rencontré le problème suivant. J'ai une fonction qui a la signature spécifiée qui prendra un objet personne comme argument comme on le voit ici.

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

Maintenant, lorsque j'essaie de connecter mon composant au redux, j'ai des problèmes avec le mapDispatchToProps. Voici mon code.

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

Le problème est que la fonction savePerson requiert qu'une personne lui soit transmise, mais je n'ai pas accès à mon état dans le mapDispatchToProps, et puisque la fonction manque d'arguments, mon code ne compilera pas. Des idées?

MODIFIER AVEC LA SOLUTION:

Voici le code avec la seule modification nécessaire pour faire fonctionner ce code.

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

J'ai juste dû passer l'objet personne à ma fonction anonyme qui appelle dispatch.

reactjstypescriptredux
11
Chaim Friedman
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))
      }
   }
);
8
Yozi