प्रतिक्रिया-रिडक्स कंटेनर घटक के लिए सहारा गुजरता है

Question

मेरे पास एक प्रतिक्रिया-रिडक्स कंटेनर घटक है जो एक प्रतिक्रियाशील मूल निवासी नेविगेटर घटक के भीतर बनाया गया है। मैं इस कंटेनर घटक के लिए एक प्रोप के रूप में नेविगेटर को पारित करने में सक्षम होना चाहता हूं ताकि उसके प्रेजेंटेशनल घटक के अंदर एक बटन दबाए जाने के बाद, यह नेविगेटर स्टैक पर किसी ऑब्जेक्ट को धक्का दे सके।

मैं सभी बायलरप्लेट कोड को लिखने की आवश्यकता के बिना ऐसा करना चाहता हूं जो प्रतिक्रिया-रिडक्स कंटेनर घटक मुझे देता है (और यह भी सभी अनुकूलन पर याद नहीं करता है जो प्रतिक्रिया-रिडक्स मुझे यहां भी देगा)।

उदाहरण कंटेनर घटक कोड:

const mapStateToProps = (state) => {
    return {
        prop1: state.prop1,
        prop2: state.prop2
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onSearchPressed: (e) => {
            dispatch(submitSearch(navigator)) // This is where I want to use the injected navigator
        }
    }
}

const SearchViewContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(SearchView)

export default SearchViewContainer

और मैं अपने नेविगेटर renderSceneफ़ंक्शन के भीतर इस तरह के घटक को कॉल करने में सक्षम होना चाहता हूं :

<SearchViewContainer navigator={navigator}/>

ऊपर दिए गए कंटेनर कोड में, मुझे mapDispatchToPropsफ़ंक्शन के भीतर से इस पास किए गए प्रोप तक पहुंचने में सक्षम होना चाहिए ।

मैं कल्पना नहीं करता कि रिड्यूक्स स्टेट ऑब्जेक्ट पर नेविगेटर को स्टोर कर रहा है और प्रेजेंटेशन कंपोनेंट को प्रॉप नीचे पास नहीं करना चाहता।

क्या कोई ऐसा तरीका है जो मैं इस कंटेनर घटक के लिए एक प्रस्ताव में पारित कर सकता हूं? वैकल्पिक रूप से, क्या कोई वैकल्पिक दृष्टिकोण है जो मैं देख रहा हूं?

धन्यवाद।

Answer 1

mapStateToPropsऔर mapDispatchToPropsदोनों ownPropsदूसरे तर्क के रूप में लेते हैं ।

[mapStateToProps(state, [ownProps]): stateProps] (Function):
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):

के लिए संदर्भ

Answer 2

आप एक दूसरे तर्क में पास हो सकते हैं, mapStateToProps(state, ownProps)जो आपको मैप में घटक में पारित होने वाले प्रॉप्स तक पहुंच देगा।

Comments

मैं इसे मैप में कैसे प्राप्त करूंगा?

— माइकल

@ मिचेल उसी तरह, आप दूसरे तर्क का उपयोग कर सकते हैं

— कॉनर हेस्टिंग्स

Answer 3

टाइपस्क्रिप्ट के साथ ऐसा करने पर कुछ गोटेक हैं, इसलिए यहां एक उदाहरण है।

एक गोचर तब था जब आप केवल डिस्पैचप्रोप्रॉप्स का उपयोग कर रहे हैं (और किसी भी स्टेट प्रॉपर मैपिंग नहीं कर रहे हैं), स्टेट पैराम को नहीं छोड़ना महत्वपूर्ण है, (इसे अंडरस्कोर प्रीफिक्स के साथ नामित किया जा सकता है)।

एक और गोचर यह था कि स्वयंप्रॉप्स परम को केवल पारित प्रॉप्स वाले इंटरफ़ेस का उपयोग करके टाइप किया जाना था - यह आपके प्रॉप्स इंटरफ़ेस को दो इंटरफेस में विभाजित करके प्राप्त किया जा सकता है, जैसे।

interface MyComponentOwnProps {
  value: number;
}

interface MyComponentConnectedProps {
  someAction: (x: number) => void;
}

export class MyComponent extends React.Component<
  MyComponentOwnProps & MyComponentConnectedProps
> {
....//  component logic
}

const mapStateToProps = (
  _state: AppState,
  ownProps: MyComponentOwnProps,
) => ({
  value: ownProps.value,
});

const mapDispatchToProps = {
  someAction,
};

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

घटक को एकल पैरामीटर पास करके घोषित किया जा सकता है:

<MyComponent value={event} />

Answer 4

सज्जाकार (@) का उपयोग करना

यदि आप डेकोरेटर्स का उपयोग कर रहे हैं, तो नीचे दिया गया कोड उस मामले में एक उदाहरण देता है जिसे आप अपने रेड कनेक्ट से कनेक्ट करने के लिए डेकोरेटर का उपयोग करना चाहते हैं।

@connect(
    (state, ownProps) => {
        return {
            Foo: ownProps.Foo,
        }
    }
)
export default class Bar extends React.Component {

यदि आप अब जाँचते हैं तो this.props.Fooआप उस प्रोफ़ेशन को देखेंगे जो उस Barघटक से जोड़ा गया था जहाँ घटक का उपयोग किया गया था।

<Bar Foo={'Baz'} />

इस मामले में this.props.Fooकड़ी होगी 'बाज'

आशा है कि यह कुछ बातों को स्पष्ट करता है।