एक ही घटक

Question

पर Redux और React-राउटर का उपयोग करने का तरीका निर्धारित नहीं कर सकता है, मैं टाइपस्क्रिप्ट सीखना शुरू कर रहा हूं और यह एक ऐसा व्यवहार है जिसे मैं समझ नहीं पा रहा हूं।

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>'. 

यहाँ मेरी अनुप्रयोग घटक है:

मैं यह त्रुटि आई

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

अगर मैं शून्य से मेरी अनुप्रयोग घटक AppProps की घोषणा में बदलने के लिए या प्रतिक्रिया। प्रॉप्स मुझे कोई त्रुटि नहीं मिली लेकिन मेरे पास हमेशा ऐपप्रॉप के साथ एक है।

मुझे समझ में नहीं आता कि यह क्यों काम नहीं कर रहा है, AppProps React.Props से विस्तार कर रहा है। क्या आपने गलती देखी?

Answer 1

पर this answer on GitHub आधार पर, इस काम कर सकते हैं:

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

Answer 2

मैं react-router@4.1.1 के साथ एक समान समस्या हुई थी।

मैं, RouteComponentProps इंटरफेस के साथ मेरी AppProps इंटरफ़ेस का विस्तार करके यह तय तो अपने मामले में AppProps इंटरफेस इस प्रकार दिखाई देगा:

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

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

Answer 3

यह प्रतिक्रिया रूटर के साथ क्या करना है और Redux आप प्रकार जोड़ने के लिए आपके कनेक्ट फ़ंक्शन पर:

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