Type d'Erreur lors de l'utilisation de la Machine avec Réagissent-Redux

Je suis en train d'utiliser réagir-redux avec la machine et je suis un type d'erreur lorsque j'essaie d'injecter des accessoires à l'aide de connect() et mapStateToProps.

Mon composant ressemble à ceci:

function mapStateToProps(state) {
    return {
        counter: state.counter
    };
}

function mapDispatchToProps(dispatch) {
    return {
        incr: () => {
            dispatch({type: 'INCR', by: 2});
        },
        decr: () => {
            dispatch({type: 'INCR', by: -1});
        }
    };
}




export default class Counter extends React.Component<HelloProps, any> {
    render() {
        return (
          <div>
              <p>
                  <label>Counter: </label>
                  <b>#{this.props.counter}</b>
              </p>
              <button onClick={e => this.props.incr() }>INCREMENT</button>
              <span style={{ padding: "0 5px" }}/>
              <button onClick={e => this.props.decr() }>DECREMENT</button>
        );
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Le magasin ressemble à ceci

let store = createStore(
    (state:HelloState, action:HelloAction) => {
        switch (action.type) {
            case 'INCR':
                return {counter: state.counter + action.by};
            default:
                return state;
        }
    },

Enfin, j'ai défini ma types:

interface HelloProps {
    counter?: number;
    incr?: () => any;
    decr?: () => any;
}

interface HelloState { 
    counter:number;
}

interface HelloAction { 
    type:string, 
    by:number;
}

Lorsque j'essaie de compiler le code j'obtiens l'erreur suivante:

(39,61): error TS2345: Argument of type 'typeof Counter' is not assignable to parameter of type 'ComponentClass<{ counter: any; } & { incr: () => void; decr: () => void; }> | StatelessComponent<...'.
  Type 'typeof Counter' is not assignable to type 'StatelessComponent<{ counter: any; } & { incr: () => void; decr: () => void; }>'.
    Type 'typeof Counter' provides no match for the signature '(props?: { counter: any; } & { incr: () => void; decr: () => void; }, context?: any): ReactElement<any>'

Il est intéressant de noter le code fonctionne toujours, même si elle déclenche le type d'erreur. Aussi, la modification de la composante de la prop interface pour les résout aussi le problème. Il semble que le type de système ne peut pas comprendre que les deux objets sont fusionnés par les deux mappé fonctions.

Vous exportez le Composant de Compteur deux fois, peut-être qui peut aussi être un problème ici.

OriginalL'auteur Ochowie | 2016-05-03

  1. 39

    Afin de préserver la sécurité de type, vous pouvez diviser vos accessoires dans les pièces, un responsable de la normale, des accessoires et un pour les répartiteurs:

    import * as React from 'react';
import {connect}  from 'react-redux';

interface StateProps {
    textPros: string,
    optionalText?: string,

}
interface DispatchProps {
    onClick1: Function,

}

class MyComp extends React.Component<StateProps & DispatchProps , any> {
    render() {
         return (<div onClick={this.props.onClick1}>{this.props.textPros}</div>);
    }
}
const mapStateToProps = (state: any, ownProp? :any):StateProps  => ({
    textPros: "example text",
});
const mapDispatchToProps = (dispatch: any):DispatchProps => ({
    onClick1: () => {
        dispatch({ type: 'CLICK_ACTION'});
    }
});
export default connect(mapStateToProps, mapDispatchToProps)(MyComp);

    Pour ceux qui recherche de la solution de contournement rapide: il suffit d'ajouter "comme tout" à base de composants. 

    export default connect(mapStateToProps, mapDispatchToProps)(MyComp as any);
    Dans mon cas, je n'ai pas de valeurs pour mapDispatchToProps, de façon explicite en passant null ou undefined au lieu de laisser la valeur semblait faire disparaître l'erreur: export default connect(mapStateToProps, null)(MyComponent);
    comme. comme? que! \(^o^)/
    Concrètement, échoue que vous avez besoin de type-paramétrer connect: Même alors, il semble y avoir des problèmes plus profonds avec connect.

    OriginalL'auteur vinga

  2. 8

    J'ai trouvé la réponse dans les deuxième à dernier post sur ce Github question. Sans le paramètre type sur le mapStateToProps et/ou mapDispatchToProps ou sur connect il va produire une intersection des types de retour des deux fonctions de mappage.

    avez-vous trouvé quelque chose de plus (explication) à ce sujet? J'ai remarqué que vous n'avez pas reçu une réponse à votre question sur le github question. Êtes-vous à l'aide des types de retour pour la mapStateToProps et mapDispatchToProps (pour lequel vous avez probablement dû au fait que les membres de l'interface optionnel comme vous l'avez suggéré)? C'est ainsi que je suis actuellement en l'appliquant à être en mesure d'exécuter.
    Ouais j'ai précisé les types de retour sur mapStateToProps et mapDispatchToProps. L'interface, les membres ne doivent être facultatif n'importe quoi sinon ce sera un échec où le composant est appelé. Je ne suis pas un grand fan de la façon dont TS fonctionne avec Redux et réagir-redux de la méthode de connexion, mais je ne peux pas penser à un bon moyen de contourner cela maintenant.

    OriginalL'auteur Ochowie