Kann nicht bestimmen, wie Redux und React-Router auf der gleichen Komponente zu verwenden sind

Question

Ich fange an, Typoskript zu lernen, und das ist ein Verhalten, das ich nicht verstehe.

Ich habe diesen Fehler:

Type 'ComponentClass<{}>' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> | ComponentClass<void | RouteComponentProps<a...'. 
    Type 'ComponentClass<{}>' is not assignable to type 'ComponentClass<void | RouteComponentProps<any>>'. 
    Type '{}' is not assignable to type 'void | RouteComponentProps<any>'. 
     Type '{}' is not assignable to type 'RouteComponentProps<any>'. 

Hier ist meine App-Komponente:

interface AppProps extends React.Props<void> { 
    todos: TodoItemData[]; 
    actions: typeof TodoActions; 
}; 

interface AppState { 
    /* empty */ 
} 

class App extends React.Component<AppProps, AppState>{ 
    render() {return (<div></div>); 
    } 
} 

function mapStateToProps(state: RootState) { 
    return { 
    todos: state.todos 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(TodoActions as any, dispatch) 
    }; 
} 

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

Wenn ich in der Erklärung meiner App Komponente AppProps durch nichtig oder Reagieren ändern. Props Ich habe keine Fehler, aber ich habe immer einen mit AppProps.

Ich verstehe nicht, warum es nicht funktioniert, AppProps erstreckt sich von React.Props. Hast du den Fehler gesehen?

Answer 1

Basierend auf this answer on GitHub kann diese Arbeit:

export default connect< AppProps, {}, {} >(
    mapStateToProps, 
    mapDispatchToProps 
)(App); 

Answer 2

ich in ein ähnliches Problem mit react-router@4.1.1 laufe.

ich es fest durch meine AppProps Schnittstelle mit RouteComponentProps Schnittstelle erstreckt, so in Ihrem Fall die AppProps Schnittstelle würde wie folgt aussehen:

import { RouteComponentProps } from 'react-router'; 
... 

interface AppProps extends RouteComponentProps<any> { 
    todos: TodoItemData[]; 
    actions: typeof TodoActions; 
} 

Answer 3

Dies hat zu tun mit reagieren-Router und Redux Sie Typen hinzufügen müssen zu Ihrer Verbindungsfunktion:

interface AppProps { 
    todos: TodoItemData[]; 
}; 

interface DispatchProps { 
    actions: typeof TodoActions; 
} 


interface AppState { 
    /* empty */ 
} 

class App extends React.Component<AppProps & DispatchProps & RouteComponentProps, AppState>{ 
    render() {return (<div></div>); 
    } 
} 

function mapStateToProps(state: RootState) { 
    return { 
    todos: state.todos 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(TodoActions as any, dispatch) 
    }; 
} 

export default connect<AppProps, DispatchProps, RouteComponentProps<any>(
    mapStateToProps, 
    mapDispatchToProps 
)(App);