प्रतिक्रिया नेविगेशन: माता-पिता के लिए नेविगेशन शीर्षक को कैसे अपडेट करें, जब मान Redux से आता है और बच्चे में अपडेट हो जाता है?

Question

मैं react-navigation का उपयोग कर रहा हूं और पेरेंटस्क्रीन और चाइल्डस्क्रीन के साथ एक स्टैक नॅविगेटर है।

दोनों स्क्रीनों में रेडक्स से गतिशील मान के साथ एक ही नेविगेशन बार होता है। Issue #313

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

समस्या यह है कि, यदि मैं मूल दृश्य पर वापस जाता हूं, तो नेविगेशन बार में अभी भी पुराना मान है। यह Redux स्टोर में वर्तमान मान को अद्यतन नहीं करता है।

बाल

जनक (जब मैं वापस जाने के लिए)

ChildScreen

class ChildScreen extends Component { 
    static navigationOptions = { 
    title: ({ state }) => `Total: ${state.params && state.params.count ? state.params.count : ''}` 
    }; 

    componentWillReceiveProps(nextProps) { 
    if (nextProps.count != this.props.count) { 
     this.props.navigation.setParams({ count: nextProps.count }); 
    } 
    } 

    render() { 
    return (
     <View> 
     <Button onPress={() => this.props.increment()} title="Increment" /> 
     </View> 
    ); 
    } 
} 

ParentScreen

class ParentScreen extends Component { 
    static navigationOptions = { 
    title: ({ state }) => `Total: ${state.params && state.params.count ? state.params.count : ''}` 
    }; 
} 

किसी भी सलाह?

Answer 1

मेरी सलाह:

1. सुनिश्चित करें कि ParentScreen के माध्यम से जुड़ा हुआ है प्रतिक्रिया-redux connect समारोह बनाओ।

2. यदि आप स्टोर की स्थिति बदलते समय स्वचालित रूप से अपडेट होने के लिए ParentScreen का शीर्षक चाहते हैं, तो इसे कनेक्ट करना पर्याप्त नहीं होगा। आपको componentWillReceiveProps का उपयोग करना होगा जैसे आप ChildScreen घटक में कर रहे हैं।

बोनस: आपको लगता है कि व्यवहार encapsulating, इस तरह के लिए एक उच्च आदेश घटक बना सकते हैं:

const withTotalTitle = Component => props => { 
    class TotalTitle extends Component { 
    static navigationOptions = { 
     title: ({ state }) => `Total: ${state.params && state.params.count ? state.params.count : ''}` 
    }; 

    componentWillReceiveProps(nextProps) { 
     if (nextProps.count != this.props.count) { 
     this.props.navigation.setParams({ count: nextProps.count }); 
     } 
    } 

    render() { 
     return (
     <Component {...props}/> 
    ); 
    } 
    } 

    return connect(state => { count: state.total })(TotalTitle); // update this (I have no idea what the structure your state looks like) 
}; 

और फिर आप इस तरह इसका इस्तेमाल कर सकते हैं:

const ChildScreen = withTotalTitle(({ increment }) => (
    <View> 
    <Button onPress={() => increment()} title="Increment" /> 
    </View> 
)); 

const ParentScreen = withTotalTitle(() => (
    <View> 
    <Text>Whatever ParentScreen is supposed to render.</Text> 
    </View> 
)); 

Answer 2

ओपी , यह आपके Redux कार्यान्वयन के साथ एक समस्या होने की संभावना है। क्या आप इस बात से परिचित हैं कि कैसे रेडक्स अपनी दुकान को लागू करता है? मुझे यहां कोई उल्लेख नहीं दिखता है जिसका अर्थ है कि यह संभव है कि आपका वेतन वृद्धि कार्य केवल बाल घटक के राज्य को क्रियाओं और reducers प्रेषण के बजाय अद्यतन कर रहा है। कृपया इस तरह एक उचित रेडक्स कार्यान्वयन पर एक नज़र डालें: https://onsen.io/blog/react-state-management-redux-store/

Answer 3

माता-पिता और बच्चे दोनों के लिए एक सामान्य reducer है। इस तरह राज्य बदलते समय सभी घटकों (आपके मामले में माता-पिता और बच्चे) अधिसूचित हो जाएंगे।

माता-पिता और बच्चे दोनों के लिए एक कनेक्ट फ़ंक्शन लिखें। आपको घटक WillReceiveProps विधि में अद्यतन स्थिति प्राप्त होगी। कृपया इसे इस्तेमाल करें।

आशा है कि इससे मदद मिलेगी।

Answer 4

आपको बच्चे से मूल घटक में वृद्धि मूल्य को पारित करने के लिए प्रोप का उपयोग करने की आवश्यकता है।

नीचे दिए गए आलेख को खोजें। यह माता-पिता और बाल घटकों के बीच संचार का एक बड़ा उदाहरण है।

http://andrewhfarmer.com/component-communication/

धन्यवाद