रेडक्स के साथ टाइपस्क्रिप्ट, क्रिया परिभाषा को फिर से घोषित किए बिना कनेक्ट का उपयोग कैसे करें?

Question

मुझे टाइपस्क्रिप्ट और रेडक्स-थंक क्रियाओं के साथ कुछ असुविधाएं हैं।

असल में मेरे घटक प्रतिक्रिया निर्माताओं को बांधने के लिए प्रतिक्रिया-रेडक्स कनेक्ट का भारी उपयोग करते हैं, समस्या यह है कि जब मैं घटक के भीतर इस रेडक्स क्रियाओं के लिए इंटरफ़ेस बनाता हूं, तो मुझे फ़ंक्शन परिभाषा को फिर से घोषित करना पड़ता है क्योंकि यह खो जाता है कनेक्ट कॉल पर।

यहां एक नमूना कोड है:

कार्रवाई प्रजापति

import api from './api'; 
import { Dispatch } from 'redux'; 
import { IReduxAction } from 'model'; 

export const FETCH_ENTITY = 'location/FETCH_ENTITY'; 
export function fetchEntity(id: string) { 
    return (dispatch: Dispatch<IReduxAction>) => { 
    dispatch({type: `${FETCH_ENTITY}_REQUEST`, payload: {id}}); 

    return api.fetchEntity(id) 
       .then((res) => { 

       dispatch({ type: `${FETCH_ENTITY}_DONE`, payload: res }); 
       return res; 
       }) 
       .catch((err) => { 
       dispatch({type: `${FETCH_ENTITY}_FAIL`, payload: err, error: true}); 
       throw err; 
       }); 
    }; 
} 

घटक

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

import { 
    fetchEntity, 
} from 'actions'; 

interface IStateProps { 
    startingEntities: any[]; 
} 

interface IDispatchProps { 
    fetchEntity: (id: string) => Promise<any>; // <- this is what I'm trying to get rid of, basically whenever I change the action creator I have to change this definition everytime 
} 

class Dashboard extends React.Component<IStateProps & IDispatchProps, void> { 

    public render() { 

    return (<div>...RENDER SOMETHING...</div>); 
    } 

} 

const mapStateToProps = (state: any, ownProps: any) => { 
    const startingEntities = foo(); // not important 

    return { 
    startingEntities, 
    }; 
}; 

const mapDispatchToProps = (dispatch: any) => { 
    return bindActionCreators({ 
    fetchEntity 
    }, dispatch); 
}; 

export default connect<IStateProps, IDispatchProps, void>(mapStateToProps, mapDispatchToProps)(Dashboard); 

यह हर फिर से घोषित करने के लिए प्रत्येक पर बिना इस आबद्ध कार्रवाई निर्माता घोषित करने के लिए वहाँ वैसे भी है फाइल?

Answer 1

आप समारोह प्रकार फिर से परिभाषित करने की जरूरत नहीं है का उपयोग कर सकते हैं। टिप्पणी के लिए

interface IDispatchProps { 
    fetchEntity: typeof fetchEntity 
} 

Answer 2

मुझे उस डिज़ाइन पैटर्न को समझने के लिए निश्चित नहीं है जिसे आप ढूंढ रहे हैं लेकिन एक्शन क्रिएटर केवल एक साधारण वस्तु है जिसका उपयोग करने वाले रेड्यूसर के लिए आवश्यक 'प्रकार' है।

इसलिए मुझे लगता है कि इसे संभालने का सबसे अच्छा तरीका है कि आप अपने कार्यों के साथ समर्पित फ़ाइल प्राप्त करें और फिर उन्हें आयात करें। प्रेषण के लिए कार्रवाई के चयन के बारे में आपका तर्क आपके घटक व्यवहार में होगा जो मुझे बेहतर लगता है।

मुझे आशा है कि इस मदद और अपने मुद्दे :)

Answer 3

मैं टाइपप्रति (ज्यादातर सिर्फ पुस्तकालय इंटरफेस के लिए index.d.ts फ़ाइलों किया है) से परिचित नहीं हूँ का समाधान होगा, लेकिन तुम क्या करने प्रकार प्रणाली प्राप्त करने के लिए सक्षम होना चाहिए fetchEntity सही ढंग से टाइप करके और IDispatchProps के लिए इसका उपयोग करने के लिए इसे सही ढंग से टाइप करके आपके लिए काम करें।

//... 

import { ThunkAction } from 'redux-thunk' 

//... 

export interface FetchEntity { 
    (id: string): ThunkAction<Promise<any>, IReduxAction, any>; 
} 

//... 

export const fetchEntity: FetchEntity = (id: string) => { 
    return (dispatch: Dispatch<IReduxAction>) => { 
    //... 
    }; 
} 

की तरह कुछ और फिर आप इसे आयात और एक ही परिभाषा

//... 

import { 
    fetchEntity, 
    FetchEntity 
} from 'actions'; 

//... 

interface IDispatchProps { 
    fetchEntity: FetchEntity 
} 

//...