Definitelytyped: प्रतिक्रिया-रेडक्स के `कनेक्ट` का उपयोग डेकोरेटर के रूप में नहीं किया जा सकता है: टाइप करें "शून्य' टाइप करने के लिए असाइन करने योग्य नहीं है"

मैं दूसरे दिन इसी तरह के मुद्दों पर था और इसे कनेक्ट फंक के लिए छोड़ दिया। प्रकार बंद दिखते हैं और पुराने प्रतिक्रिया प्रकारों का उपयोग करते हैं। मैं इसे ठीक करने और पीआर जमा करने का प्रयास कर सकता हूं?

बेशक! इन प्रकारों को मूल रूप से लिखे जाने के बाद से बहुत कुछ बदल गया है, हालांकि मुझे अभी भी संदेह है कि उत्परिवर्तन-सज्जाकार समर्थन के बिना कुछ उपयोगी संभव है। लेकिन मैंने पहले टाइप सिस्टम में अन्य अपर्याप्तताओं के आसपास काम किया है, इसलिए इसे एक शॉट दें।

शायद मैप किए गए प्रकार आपको वहां के रास्ते का हिस्सा मिल सकते हैं, इसलिए कम से कम आपके पास आउटपुट में _some_ उपयोगी प्रकार की जानकारी है?

योलो

export function myConnect(mapStateToProps, mapDispatchToProps) {
    return function (target) {
        return <any>connect(mapStateToProps, mapDispatchToProps)(target);
    }
}

मुझे नहीं लगता कि इसे योलो-टाइप करने के लिए बहुत कुछ है, यहां सूचीबद्ध वर्कअराउंड और # 8787 में, विशेष रूप से फ़ंक्शन कॉल के संकेतों का उपयोग करने के बारे में, यह बुरा नहीं है (विशेष रूप से घटक वर्गों के लिए आईडीई टेम्पलेट्स के साथ) और किसी भी प्रकार का घटक होना दुखद है। :( फ़ंक्शन कॉल के बजाय इसे डेकोरेटर के रूप में उपयोग करने के लिए कोई भी टाइपिंग कनेक्ट वास्तव में घोड़े से पहले गाड़ी डाल रहा है।

सीधे @connect उपयोग करने के लिए (इसलिए कस्टम डेकोरेटर्स को पेश किए बिना) मैं निम्नलिखित वर्कअराउंड का उपयोग करता हूं:

@(connect(mapStateToProps, mapDispatchToProps) as any)
class MyComponent extends React.Component<...> {...}

लेकिन मैं @seansfkelley से पूरी तरह सहमत

डेकोरेटर सिंटैक्स शांत होने के बावजूद, मुझे अभी भी लगता है कि एचओसी जैसे कनेक्ट को मानक तरीके से उपयोग करना एक बेहतर अभ्यास है।

1) यह एक वर्ग के प्रकार को संशोधित करता है जो डेकोरेटर स्पेक के खिलाफ जाता है।
2) कनेक्ट एक डेकोरेटर नहीं है, यह एक एचओसी है।
3) यह स्टेटलेस और स्टेटफुल घटकों के लिए एक अलग सिंटैक्स होने से कोड की पोर्टेबिलिटी को तोड़ता है।

तो मैं कृपया कहना चाहता हूं, ऐसी परिभाषा प्रदान न करें जो देव को गलत तरीके से उपयोग करने की अनुमति दे :)

@npirotte सहमत हैं। आप बिल्कुल सही हैं, एचओसी का उपयोग डेकोरेटर्स के रूप में करना डेकोरेटर्स स्पेक का उल्लंघन करता है। यह अब बेस क्लास नहीं है बल्कि पूरी तरह से अलग है।

मेरे पास कस्टम डेकोरेटर्स के साथ समान सटीक समस्याएं हैं और टीएस में उनके समर्थन की स्थिति को देख रहे हैं (वे अभी भी ध्वज के पीछे हैं और एएफएआईसीएस डिफ़ॉल्ट रूप से उन्हें सक्षम करने की कोई योजना नहीं है) मैं समर्थन छोड़ने वाला हूं उन्हें। इसके अलावा सज्जाकार अभी भी w3c ड्राफ्ट में हैं।

एक घटक को एक नए में लपेटने का सबसे अच्छा तरीका _decorate_ मौजूदा वर्ग की कोशिश करने के बजाय इसके लिए एक उच्च ऑर्डर फ़ंक्शन का उपयोग करना है।

अगर मैं इसे आयात करता हूं तो मुझे एक ही त्रुटि है। हालांकि, निम्नलिखित मेरे लिए काम करता है:

const { connect } = require('react-redux');

@connect(mapStateToProps, mapDispatchToProps)
class MyComponent extends React.Component<...> { ... }

@TriStarGod जो इस बात पर निर्भर करता है कि आपने require कैसे टाइप किया है। ऐसा लगता है कि आप उस स्थिति में connect टाइप करके any साथ समाप्त कर रहे हैं।

एक और समाधान/समाधान।

चूंकि मेरे पास पहले से ही अपना ऐप स्टेट है, इसलिए मुझे इस रूप में कुछ बहुत ही कम फ़ंक्शन चाहिए:

export interface PageProps {
    routing: RouterState;
}

export interface PageDispatch {
    navigate: () => void
}

@connect<PageProps, PageDispatch>(
    state => ({
        routing: state.routing
    }),
    dispatch => ({
        navigate: () => dispatch(push("/"))
    })
)
export class Page extends React.Component<PageProps & PageDispatch> {
...
}

और यहाँ वह लिपटे कनेक्ट विधि है:

import { connect } from "react-redux";
import { ApplicationState } from './rootReducer';

interface MapPropsParam<TProps>{
    (state: ApplicationState, ownProps?: TProps): TProps
}

interface MapDispatchParam<TProps, TDispatchProps>{
   (dispatch: Redux.Dispatch<ApplicationState>, ownProps?: TProps): TDispatchProps;
}

export interface ConnectedComponent<TProps> {
    <TComponent extends React.ComponentType<TProps>>(component: TComponent): TComponent;
}

function connectToAppState<TProps, TDispatchProps = {}>(mapProps: MapPropsParam<TProps>, mapDispatch?: MapDispatchParam<TProps, TDispatchProps>) : ConnectedComponent<TProps> {
    return connect<TProps, TDispatchProps, TProps>(mapProps, mapDispatch) as ConnectedComponent<TProps & TDispatchProps>;    
}

export {
    connectToAppState as connect
}

आपके काम के लिए Thx। सदस्यता लेना और इस मुद्दे पर प्रगति की प्रतीक्षा करना।

@offbeatful कृपया अन्य विविधताओं की घोषणा टाइप करें

यदि कोई ऑब्जेक्ट पास हो जाता है, तो उसके अंदर के प्रत्येक फ़ंक्शन को Redux एक्शन क्रिएटर माना जाता है। समान फ़ंक्शन नामों वाली एक वस्तु, लेकिन प्रत्येक क्रिया निर्माता के साथ एक प्रेषण कॉल में लपेटा जाता है ताकि उन्हें सीधे बुलाया जा सके, घटक के प्रोप में विलय कर दिया जाएगा।

@offbeatful टिप्पणी पर आधारित एक और समाधान

myConnect.ts

import {
    connect as originalConnect, MapDispatchToPropsParam, MapStateToPropsParam, MergeProps, Options
} from "react-redux";
import * as React from "react";

export interface InferableComponentEnhancerWithProps<TInjectedProps, TNeedsProps> {
    <TComponent extends React.ComponentType<TInjectedProps & TNeedsProps>>(component: TComponent): TComponent;
}

interface MyConnect {
    <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}>(
        mapStateToProps?: MapStateToPropsParam<TStateProps, TOwnProps>,
        mapDispatchToProps?: MapDispatchToPropsParam<TDispatchProps, TOwnProps>
    ): InferableComponentEnhancerWithProps<TStateProps & TDispatchProps, TOwnProps>;

    <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, TMergedProps = {}>(
        mapStateToProps?: MapStateToPropsParam<TStateProps, TOwnProps>,
        mapDispatchToProps?: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
        mergeProps?: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>,
        options?: Options<TStateProps, TOwnProps, TMergedProps>
    ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;

}

export const connect = originalConnect as MyConnect;

@pravdomil स्निपेट और नवीनतम प्रकारों (5.0.13) के आधार पर अपडेट किया गया

import { ApplicationState } from "./rootReducer";

import * as React from "react";
import {
    connect as originalConnect, MapDispatchToPropsParam, MapStateToPropsParam, MergeProps, Options
} from "react-redux";

export type InferableComponentEnhancerWithProps<TInjectedProps, TNeedsProps> = <TComponent extends React.ComponentType<TInjectedProps & TNeedsProps>>(component: TComponent) => TComponent;

interface MyConnect {
    <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}>(
        mapStateToProps?: MapStateToPropsParam<TStateProps, TOwnProps, ApplicationState>,
        mapDispatchToProps?: MapDispatchToPropsParam<TDispatchProps, TOwnProps>
    ): InferableComponentEnhancerWithProps<TStateProps & TDispatchProps, TOwnProps>;

    <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, TMergedProps = {}>(
        mapStateToProps?: MapStateToPropsParam<TStateProps, TOwnProps, ApplicationState>,
        mapDispatchToProps?: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
        mergeProps?: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>,
        options?: Options<TStateProps, TOwnProps, TMergedProps>
    ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;

}

export const connect = originalConnect as MyConnect;

अरे @offbeatful (cc: @pravdomil मुझे लगता है?), मैंने हाल ही में इस मुद्दे से संबंधित एक स्टैक ओवरफ्लो प्रश्न पूछा है, जहां यह निष्कर्ष निकाला गया था कि यह वर्तमान में समर्थित नहीं है। उस प्रश्न के एक भाग के रूप में मैंने जो प्रयास किया उसे प्रदर्शित करने के लिए मैंने एक भंडार तैयार किया। यह निष्कर्ष निकाला गया कि यह वर्तमान में समर्थित नहीं है इसलिए मैं आज आपका कोड स्निपेट देखने के लिए उत्साहित था और इसका उपयोग करने के लिए अपने भंडार को अपडेट करने का प्रयास करने के लिए आगे बढ़ा।

यहां आप अपने कोड स्निपेट के साथ कमिटमेंट को एकीकृत देख सकते हैं

यह अब उन त्रुटियों के साथ नहीं चिल्लाता है जो मुझे पहले मिल रही थीं, लेकिन मैंने पाया है कि मेरे उपयोग-मामले में जहां मेरा घटक जुड़ा हुआ है, लेकिन इसका अपना सहारा भी है, यह नया हस्ताक्षर अब इसे बना देगा ताकि यहां तक ​​​​कि राज्य के प्रोप की भी आवश्यकता हो खुद का (TSX) सहारा। मेरे भंडार में cd my-app && yarn start मेरा मतलब दिखाएगा।

क्या आपको लगता है कि यह कुछ ऐसा है जिसे संबोधित भी किया जा सकता है या यह संभव नहीं है?

आप संभवतः इस connect संस्करण का उपयोग कर रहे होंगे

connect(
        mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
        mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
        mergeProps: null | undefined,
        options: Options<State, TStateProps, TOwnProps>
): InferableComponentEnhancerWithProps<TStateProps & TDispatchProps, TOwnProps>

यदि ऐसा है, तो आपको options पैरामीटर को Options<any, any, any> होने के लिए ठीक करने की आवश्यकता है, इस तरह आपके पास TStateProps & TDispatchProps समस्या नहीं होगी क्योंकि यह TStateProps & any

संक्षेप में:

const options = { withRef:true } as Options<any, any, any>;
export const Component = connect(mapStateToProps, mapDispatchToProps, null, options)

आप की तरह मस्त

@TomasHubelbauer बस अपनी विधि की कोशिश की, अगर आप डिफ़ॉल्ट redux कनेक्ट विधि पर वापस जाते हैं
यह काफी अजीब तरह से काम करेगा।

यह सुनिश्चित करना सबसे अच्छा है कि आप तीनों के बीच साझा प्रकारों का उपयोग करें:

export type CounterStateProps = {
    count: number;
};

export type CounterDispatchProps = {
    onIncrement: () => void;
};

export type CounterOwnProps = {
    initialCount: number;
};

export type CounterProps = CounterStateProps & CounterDispatchProps & CounterOwnProps;

फिर स्टेटफुल कंपोनेंट को लागू करें

export class StatefulCounter extends React.Component<CounterProps, CounterStateProps> {
    timer: number;

    componentDidMount() {
        this.timer = setInterval(this.props.onIncrement, 5000);
    }

    componentWillUnmount() {
        clearInterval(this.timer);
    }

    render() {
      return (
        <StatelessCounter count={this.props.count}/>
      );
    }
}

और अंत में कनेक्टर क्लास को ऐसे बनाएं जैसे कि कनेक्ट में रेडक्स के बिल्ड का उपयोग करके कस्टम कनेक्ट कोड नहीं।

const mapStateToProps =
    (state: RootState, ownProps: CounterOwnProps): CounterStateProps => ({
        count: countersSelectors.getReduxCounter(state) + ownProps.initialCount,
    });

const mapDispatchToProps =
    (dispatch: Dispatch<CounterActionType>): CounterDispatchProps => bindActionCreators({
        onIncrement: CounterActions.increment,
    }, dispatch);

export const ConnectedCounter =
    connect(mapStateToProps, mapDispatchToProps)(StatefulCounter);

@ जॉनहैंडली हाँ, मुझे यह काम पता है, मेरे उदाहरण में मैंने दिखाया कि इससे पहले कि मैंने इसे सजावटी के रूप में काम करने के लिए कुछ सुझावों की कोशिश की। मैं गैर-सज्जाकार संस्करण का सफलतापूर्वक उपयोग करता हूं, लेकिन मैं वास्तव में डेकोरेटर को भी एक काम करना चाहता हूं।

इसके अलावा, मैं आप अपने प्रकार के मिश्रित लगता है, आप का उपयोग CounterStateProps (जिनमें से वापसी प्रकार है mapDispatchToProps के एक घटक के रूप में CounterProps (जो ठीक है, यह Redux राज्य है प्रॉप्स, रेडक्स डिस्पैच प्रॉप्स और जेएसएक्स के खुद के प्रॉप्स), लेकिन कंपोनेंट्स स्टेट के लिए एक प्रकार के रूप में भी। इसके बजाय state अपना प्रकार होना चाहिए जो किसी भी तरह से बाहरी घटक के टाइप सिग्नेचर में शामिल नहीं है।

यह संभव है कि मैं आपके समाधान को पूरी तरह से समझ नहीं पाया, इसलिए यदि आप यह काम मेरे भंडार में कर सकते हैं (जहां मैं टीएसएक्स और रेडक्स राज्य प्रोप में दोनों स्वयं के प्रोप का उपयोग करता हूं) बिना किसी त्रुटि के कह रहा है कि आपको टीएसएक्स में रेडक्स राज्य प्रोप निर्दिष्ट करने की आवश्यकता है , भी, यह बहुत अच्छा होगा!

इस मुद्दे पर +1

मैंने @offbeatful से स्निपेट अपडेट किया है और अब मैं इसका सफलतापूर्वक उपयोग कर रहा हूं।

Connect.ts ( IAppState redux राज्य का इंटरफ़ेस है)

import React from 'react'
import {
    connect as originalConnect,
    MapDispatchToPropsParam,
    MapStateToPropsParam,
    MergeProps,
    Options,
} from 'react-redux'


export type InferableComponentEnhancerWithProps<IInjectedProps, INeedsProps> =
    <IComponent extends React.ComponentType<IInjectedProps & INeedsProps>>(component: IComponent) => IComponent

export interface IConnect {
    <IStateProps = {}, IDispatchProps = {}, IOwnProps = {}>(
        mapStateToProps?: MapStateToPropsParam<IStateProps, IOwnProps, IAppState>,
        mapDispatchToProps?: MapDispatchToPropsParam<IDispatchProps, IOwnProps>,
    ): InferableComponentEnhancerWithProps<IStateProps & IDispatchProps, IOwnProps>

    <IStateProps = {}, IDispatchProps = {}, IOwnProps = {}, IMergedProps = {}>(
        mapStateToProps?: MapStateToPropsParam<IStateProps, IOwnProps, IAppState>,
        mapDispatchToProps?: MapDispatchToPropsParam<IDispatchProps, IOwnProps>,
        mergeProps?: MergeProps<IStateProps, IDispatchProps, IOwnProps, IMergedProps>,
        options?: Options<IStateProps, IOwnProps, IMergedProps>,
    ): InferableComponentEnhancerWithProps<IMergedProps, IOwnProps>

}

export const connect = originalConnect as IConnect

तब मेरा जुड़ा घटक इस तरह दिखता है:

import {connect} from 'path-to-my-connect/connect'

interface IOwnProps {
    ... props exposed for the real parent component
}

interface IStateProps {
    ... props from mapStateToProps
}

interface IDispatchProps {
    ... props from mapDispatchToProps
}

interface IProps extends IStateProps, IDispatchProps, IOwnProps {}

@connect<IStateProps, IDispatchProps, IOwnProps>(
    (state: IAppState) => {
            return {
                foo: getFoo(state), // getFoo is a selector using 'reselect'
            }
        },
    {setFoo, increment, decrement, ... your action creators},
)
class MyComponent extends React.PureComponent<IProps> {
        // your component implementation
}

export default (MyComponent as any) as React.ComponentType<IOwnProps>

डायरेक्ट कास्टिंग MyComponent as React.ComponentType<IOwnProps> विफल हो जाएगी, इसलिए मैंने इसे पहले any रूप में टाइप किया। मुझे पता है कि यह एक हैक है लेकिन माता-पिता और घटक के लिए भी अच्छा काम करता है।

यह सबसे व्यवहार्य, फिर भी अभी भी प्रतिबंधात्मक समाधान है जिसके साथ मैं आने में सक्षम हूं।

"react-redux": "^5.0.6",
"typescript": "^2.8.1",
"@types/react-redux": "^6.0.0",

कोई खबर?

@ctretyak नहीं , आपको अंततः एक घोषणा फ़ाइल स्वयं बनानी होगी और डेकोरेटर को संशोधित करना होगा। ऐसा लगता है कि रिएक्ट इको और टीएस सबसे अच्छे दोस्त नहीं हैं, इसलिए मैं इससे आगे क्यों बढ़ा हूं।

const DecoratedComponent = require('../DecoratedComponent').default;

इस प्रकार का आयात आईडीई को प्रॉप्स दिखाने और टीएस त्रुटि को छिपाने की अनुमति देता है। थोड़ा बदसूरत, लेकिन सज्जाकार बेहतर दिखते हैं तो साधारण कनेक्ट। विशेष रूप से यदि आप कुछ चयनकर्ता को स्वचालित रूप से जोड़ने के लिए कॉन्फ़िगर करते हैं जैसे अनुवाद या नेविगेशन

यह कोई प्रतिक्रिया-रिडक्स समस्या नहीं है। मेरे पास @withRouter (रिएक्ट-राउटर से) और @graphql के साथ समान संबंध है

टाइपप्रति लगता है समझ में नहीं आता है कि एक डेकोरेटर सहारा इंजेक्षन कर सकता है ...

टाइपप्रति लगता है समझ में नहीं आता है कि एक डेकोरेटर सहारा इंजेक्षन कर सकता है ...

उह, यह अभी भी एक मुद्दा है? बस इसी में भाग गया।

मुझे दुख है कि कुछ हमारे मस्तिष्क को नष्ट कर रहा है, लेकिन वे हमें और अधिक आरामदायक बनाने के लिए डिज़ाइन किए गए थे :(

मुझे दुख है कि कुछ हमारे मस्तिष्क को नष्ट कर रहा है, लेकिन वे हमें और अधिक आरामदायक बनाने के लिए डिज़ाइन किए गए थे :(

मैं भी :(

यह शायद सभी उपयोग के मामलों को कवर नहीं करता है लेकिन मेरे लिए अच्छा काम कर रहा है।
यह मुझे एक ही स्थान पर अपना स्टोर प्रकार (MyAppStore) जोड़ने का मौका भी देता है।

export function connectTs<TDispatchProps={}, TOwnProps=any>(
  mapStateToProps?: (state: MyAppStore, ownProps?: TOwnProps) => any,
  mapDispatchToProps?: MapDispatchToPropsParam<TDispatchProps, TOwnProps>
): any {
  return connect(mapStateToProps, mapDispatchToProps)
}

क्या आपके पास कोई अपडेट है?

मैं डेकोरेटर के रूप में भी कनेक्ट का उपयोग करना चाहता हूं।

कोई आधिकारिक समाधान की आपूर्ति ???
मुझे लगता है कि कई डेवलपर्स कनेक्ट के बजाय @connect का उपयोग करना पसंद करते हैं (mapStateToProps, mapDispatchToProps) (घटक)