web-dev-qa-db-fra.com

Typescript React / Redux: l'argument de type 'typeof MyClass' n'est pas assignable au paramètre de type 'ComponentType <...'

Je suis nouveau sur Redux et nouveau sur TypeScript.

J'ai trouvé une assez bonne version de base de ce que j'essaie de faire dans la documentation de react-redux .

Le code est comme ceci:

import * as actionCreators from '../actions/index'
import { bindActionCreators } from 'redux'
import React, { Component } from 'react'
import { connect } from 'react-redux'

class TodoApp extends Component {
    render() {
        return (<div>test!</div>)
    }
}
function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) }
}


export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)

Mon éditeur de code (VS Code avec l'extension TSLint) et tsc mettent en évidence cette dernière (TodoApp) comme une erreur, et voici le message que je reçois:

src/components/test.tsx (20,61): erreur TS2345: L'argument de type 'typeof TodoApp' n'est pas attribuable au paramètre de type 'ComponentType <{todos: any; } & {actions: typeof "(filepath) ... '. Le type' typeof TodoApp 'n'est pas assignable au type' StatelessComponent <{todos: any;} & {actions: typeof" (filepath) ... '. Le type 'typeof TodoApp' ne fournit aucune correspondance pour la signature '(props: {todos: any;} & {actions: typeof "(filepath)/actions/index";} & {children ?: ReactNode;}, context ?: any ): ReactElement | nul'.

20 Exporter la connexion par défaut (mapStateToProps, mapDispatchToProps) (TodoApp)

Mon problème est que je ne comprends pas exactement ce que font mapStateToProps et connect, mais avant de comprendre,
J'aimerais savoir s'il y a un changement de code que je peux faire ici pour corriger cette "erreur" TypeScript.

reactjstypescriptredux
9
kris

Votre composant react n'attend aucun accessoire, donc votre connect a une erreur car il en déduit que mapStateToProps et mapDispatchToProps doivent tous deux retourner des objets vides

Vous pouvez contourner ce problème en ajoutant des définitions de type pour les accessoires de réaction, mais il y a aussi beaucoup d'utilisation dangereuse de any implicite. Si vous deviez taper entièrement cette application pour des raisons de sécurité, cela ressemblerait à ceci ...

interface ITodo {
  description: string
}

interface ITodosState {
  todos: ITodo[]
}

interface ITodoProps {
  todos: ITodo[]
}

interface ITodoActionProps {
  someAction: () => void
}

class TodoApp extends React.Component<ITodoProps & ITodoActionProps> {
    render() {
        return (<div>test!</div>)
    }
}

function mapStateToProps(state: ITodosState): ITodoProps {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch: Dispatch<ITodosState>): ITodoActionProps {
  return bindActionCreators({ someAction: actionCreators.someAction }, dispatch)
}

export default connect<ITodoProps, ITodoActionProps, {}>(mapStateToProps, mapDispatchToProps)(TodoApp)
11
alechill

Vous n'avez pas tapé les accessoires de TodoApp.

type Props = {
    todos: any[] // What ever the type of state.todos is
    actions: {
       addTodo: Dispatch<any>
    }
}

class TodoApp extends React.Component<Props> {
    render() {
        return <div>test!</div>
  }
}
0
tellmchau