Redux: कनेक्ट के साथ पुन: रेंडरिंग नहीं करने वाले घटक ()

Reducers में क्रियाओं के परिणामों के माध्यम से स्टोर में डेटा सेट / अपडेट / डिलीट हो जाता है। Reducers आपके एप्लिकेशन के एक स्लाइस की वर्तमान स्थिति प्राप्त करते हैं, और नए राज्य को वापस पाने की उम्मीद करते हैं। सबसे सामान्य कारणों में से एक है कि आपके घटकों को फिर से प्रस्तुत नहीं किया जा सकता है कि आप आवश्यक बदलाव के साथ राज्य की एक नई प्रति वापस करने के बजाय अपने पुनर्विकास में मौजूदा स्थिति को संशोधित कर रहे हैं ( समस्या निवारण अनुभाग देखें )। जब आप मौजूदा स्थिति को सीधे म्यूट करते हैं, तो Redux राज्य में अंतर का पता नहीं लगाता है और आपके घटकों को सूचित नहीं करेगा कि स्टोर बदल गया है।

तो मैं निश्चित रूप से आपके reducers की जाँच करूँगा और सुनिश्चित करूँगा कि आप मौजूदा स्थिति को बदल नहीं रहे हैं। उम्मीद है की वो मदद करदे!

@Ernieturner ने जो कहा उसके अलावा, सुनिश्चित करें कि आपके connect(mapStateToProps)(YourConnectedComponent) फ़ंक्शन में mapStateToProps फ़ंक्शन प्रासंगिक स्थिति का नक्शा बनाता है (इस मामले में entities ) ताकि जुड़ा हुआ घटक सुन रहा है राज्य के उस टुकड़े को।

यह भी ध्यान रखें कि connect() एक उथले तुलना करता है: https://github.com/rackt/react-redux/blob/d5bf492ee35ad1be8ffd5fa6be6cd6df3b41e/src/compenders/createConnect.js#L91

यह संभावना है कि क्योंकि आपके कनेक्टेड राज्य का आकार नहीं बदला है, इसलिए यह एक अपडेट नहीं करने के लिए मान रहा है।

आह, समझ गया! मेरा mapStateToProps एक वस्तु को राज्य से निकालने का प्रयास कर रहा था, लेकिन सही कुंजी को निर्दिष्ट नहीं कर रहा था। entities.users[login] निकालने के बजाय, मैंने इसे entities.users[id] सेट किया था। entities.users ऑब्जेक्ट को login स्ट्रिंग द्वारा कुंजीबद्ध किया गया था, इसलिए जब संख्यात्मक id नहीं मिला था, तो वास्तव में कोई भी प्रॉप नहीं बदला था, इसलिए पुन: रेंडर की आवश्यकता नहीं थी।

आप सब का सहायता के लिए धन्यवाद! मैं वास्तव में उस समय की सराहना करता हूं जो आपने सहायता के लिए लिया था।

@timdorr
क्या बकवास है। connect() गहरे परिवर्तनों की जाँच करने के लिए कैसे बाध्य करें? अन्यथा किसी को राज्य के प्रत्येक गहरे स्तर के लिए दर्जनों कंटेनर घटक बनाने पड़ते हैं। यह सामान्य नहीं है

आप बिल्कुल किसी भी आकार के अनुप्रयोग में कई जुड़े घटक होना चाहिए। यदि आपके पास एक एकल शीर्ष स्तर से जुड़ा घटक है, तो आप अपने ऐप के बड़े हिस्से को अनावश्यक रूप से हर बार राज्य परिवर्तन के लिए फिर से प्रस्तुत करने जा रहे हैं। और आप प्रतिक्रिया-रिडक्स की प्राथमिक प्राथमिकताओं में से एक का पालन कर रहे होंगे, जो कि केवल उस स्थिति में फिर से प्रस्तुत करना है जब इसे परिवर्तनों के लिए सब्सक्राइब किया जाता है।

यदि आपको राज्य की एक जटिल क्वेरी का मूल्यांकन करने की आवश्यकता है, तो उस गति को बढ़ाने के लिए reselect का उपयोग करें।

@timdorr @wzup

यह स्पष्ट करने में सहायक हो सकता है कि गहरी तुलना के मुद्दे को हल करने के लिए पेड़ में निचले स्थानों पर कनेक्ट करना कड़ाई से आवश्यक नहीं है।

अपने घटक वृक्ष में निचले स्थानों पर जुड़ने से वास्तव में _performance_ की मदद हो सकती है, लेकिन यह गहरी तुलना समस्या का मूलभूत समाधान नहीं है। गहरी तुलना समस्याओं का समाधान आपके रीड्यूसर के लिए राज्य को पूरी तरह से अपडेट करने के लिए है, ताकि जब राज्य का गहरा टुकड़ा बदल जाए, तो जानने के लिए उथले तुलना पर्याप्त हो।

दूसरे शब्दों में, राज्य के एक बड़े नेस्टेड टुकड़े में एक शीर्ष-स्तरीय घटक को जोड़ने से उथले तुलनाओं के साथ सिर्फ _even ठीक काम करता है, जब तक कि आपके reducers मौजूदा राज्य ऑब्जेक्ट्स को म्यूट किए बिना नया राज्य वापस कर देते हैं।

@naw उस टिप के लिए धन्यवाद। इसके आधार पर मैंने एक नया रिड्यूसर जोड़ना समाप्त किया जहाँ मैं इस समस्या का सामना कर रहा था:

const reducers = combineReducers({
    //...bunch of reducers which always return objects of 3 or 4 properties that change sometimes but
    // the shape stays the same
    dataVersion: (state = Symbol(), action = {}) => {
        switch (action.type) {
            case SAME_ACTION_AS_THE_ONE_THAT_UPDATES_A_COMPLEX_PROPERTY:
            case ANOTHER_ACTION_THAT_ALSO_UPDATES_A_COMPLEX_PROPERTY:
                return Symbol():
            default:
                return state;
        }
    }
})

यह अभी भी मुझे अजीब लगता है, हालांकि। अगर मुझे एक reducer मिला है जो जाता है:

    switch (action.type) {
       case UPDATE_THIS:
           return {a: action.a, b: action.b, c: action.c};
       default:
           return state;
     }

तथ्य यह है कि मैं एक नई इनिशियलाइज्ड वस्तु लौटा रहा हूं जो कि सिर्फ उसी आकार की होती है जैसा कि पिछले राज्य में previousState !== newState को ट्रिगर करने के लिए पर्याप्त होना चाहिए। अगर मुझे हर बार अपरिवर्तनीय डेटा लौटाया जाए, तो ऐसा लगता है कि यह केवल पहचान के बजाय आकार की उथली तुलना करने के लिए अधिक अक्षम है। (यह मानते हुए कि Redux वास्तव में क्या कर रहा है, यह तथ्य है कि मेरा Symbol वर्कअराउंड कार्य मुझे लगता है कि क्या चल रहा है)

इस विशेष मामले में अधिक कंटेनर घटकों को जोड़ने से समस्या हल नहीं होती है। अफसोस की बात है कि मैं स्पष्टीकरण के लिए एक पूरे गितुब परियोजना से लिंक नहीं कर सकता क्योंकि यह मेरी कंपनी का बंद स्रोत सामान है जो मैं यहां काम कर रहा हूं।

@Zacqary पिछले राज्य की वर्तमान स्थिति की तुलना सख्त समान (===) के साथ की जाती है। राज्यप्रॉप्स की तुलना (मेपस्टेटटॉप्रॉप्स का परिणाम) उथले बराबर के साथ की जाती है।

@Zacqary

mapStateToProps स्टोर में पहुंचकर अपने जुड़े घटक के लिए डेटा "कोडांतरण" कर रहा है।

mapStateToProps विभिन्न टुकड़े (ओं) को स्टोर से बाहर निकालता है, और उन्हें एक नए stateProps ऑब्जेक्ट में कुंजियों को असाइन करता है।

परिणामी stateProps वस्तु हर बार नई होगी (इसलिए इसकी पहचान बदलती है), इसलिए हम केवल stateProps ऑब्जेक्ट की वस्तु पहचान की तुलना नहीं कर सकते हैं --- हम _have_ एक नीचे जाने के लिए स्तर और प्रत्येक मूल्य की वस्तु पहचान की जाँच करें, जो shallowEqual खेल में आता है, जैसा कि @jimbolla ने कहा।

जब आप reducers को इस तरह लिखते हैं तो आमतौर पर समस्याएँ उत्पन्न होती हैं, ताकि राज्य के टुकड़े की वस्तु पहचान _does't change_, जबकि कुछ नेस्टेड विशेषता इसके भीतर _does_ बदल जाती है। यह नए राज्य को अपरिवर्तनीय रूप से वापस करने के बजाय उत्परिवर्तित करने वाली स्थिति है, जो react-redux का कारण बनता है कि कुछ भी नहीं बदला, जब वास्तव में, कुछ _did_ बदल जाए।

तथ्य यह है कि मैं एक नई आरंभिक वस्तु लौटा रहा हूं, जो कि केवल उसी आकार की होती है, जैसा कि पिछली स्थिति में होना चाहिए।

यदि आप राज्य के कुछ स्लाइस के लिए एक नई वस्तु लौटाते हैं, और mapStateToProps उस स्लाइस का मूल्य उसकी एक कुंजी के लिए मान के रूप में उपयोग करते हैं, तो react-redux देखेंगे कि ऑब्जेक्ट की पहचान बदल गई, और होगा पुन: रेंडर करने से रोकें नहीं।

क्या ऐसा कुछ विशिष्ट है जो आप से अपेक्षा के अनुरूप काम नहीं कर रहा है? मुझे वास्तव में यकीन नहीं है कि आपके Symbol वर्क का क्या मतलब है।

यह विचार करने के लायक है कि क्या अतिरिक्त घटक को बस सहारा लेने के लिए connected() घटक में नीचे ले जाना चाहिए। मुझे इस मुद्दे पर connect() दो घटकों का प्रयास करके मिला, लेकिन यह अनावश्यक जटिलता थी।

@ernieturner मुझे पता है कि यह पुराना है, लेकिन आप अपने समस्या निवारण अनुभाग लिंक को अपडेट करना चाह सकते हैं।

चियर्स

मुझे यह समस्या थी, ठीक नहीं।
मैंने संपत्तियों को राज्य में लागू किया, जैसे:

  constructor(props){
    this.state = {
      text: props.text
    }
  }

और यह काम नहीं कर रहा था। इसलिए मैंने प्रॉप्स से सीधे मूल्य लागू किया

{this.props.text}

और यह ठीक काम करता है :)

@AlexanderKozhevin जब तक मैं गलत नहीं हूँ, आपका निर्माता super(props) गायब है।
आम तौर पर आप भी उपयोग करने की अनुमति नहीं कर रहे हैं this इससे पहले कि आप फोन super(props) ।

@ cdubois-mh आप सही हैं, नोट के लिए धन्यवाद।

मैंने कस्टम-निर्मित ऐप रूट reducer लिखा है और उस समस्या को प्राप्त करता हूं।
पूरे राज्य की एक प्रति लौटा देना
{...state}
जड़ reducer के अंत में मेरे लिए मदद की

@daedalius यह है कि एक reducer कैसे काम करने वाला है।
यदि कार्रवाई अप्रासंगिक है, या अपेक्षित संशोधित मूल्यों के साथ राज्य की एक प्रति वापस करना चाहिए, तो इसे राज्य को वापस करना चाहिए।

यदि आप एक प्रति वापस नहीं करते हैं, तो प्रतिक्रिया हमेशा यह पता लगाने में सक्षम नहीं होगी कि एक मूल्य बदल गया है।
(उदाहरण के लिए, यदि आप नेस्टेड एंट्री को संशोधित करते हैं)

इस स्थिति की जाँच करें:

{
    "clients": [
        { "name": "John", "cid": 4578 },
        { "name": "Alex", "cid": 5492 },
        { "name": "Bob",  "cid": 254 }
    ]
}

यदि आप क्लाइंट का नाम संशोधित करते हैं, लेकिन राज्य का कोई क्लोन नहीं लौटाते हैं, तो आपने राज्य को संशोधित नहीं किया है, आपने ऑब्जेक्ट को सरणी में संशोधित किया है।

ऑब्जेक्ट में अभी भी पहले जैसा ही संदर्भ होगा, इसलिए प्रतिक्रिया परिवर्तन को याद करेगी।
एक क्लोन वापस करके, राज्य का स्वयं का संदर्भ अब अलग होगा (चूंकि यह एक नई वस्तु है) और प्रतिक्रिया पूरी पुन: प्रतिपादन प्रक्रिया शुरू करेगी।

अगर मैं गलत हूं, तो कृपया मुझे सुधारें, लेकिन यह है कि मैं कैसे काम करने के लिए रिड्यूसर समझता हूं।

हां, यह सही है। इसके अलावा, @daedalius , ध्यान दें कि आप _always_ को state की उथली प्रतिलिपि नहीं बनाना चाहते हैं - आपको केवल यही करना चाहिए कि यदि कुछ बदल गया है, अन्यथा आप अपने घटकों के अनावश्यक पुन: प्रतिपादन के साथ हवा कर सकते हैं।

बलपूर्वक जानकारी

<AfterConnect
    _forceUpdate={Symbol()}
/>

@BrookShuihuaLee इसका क्या मतलब है? आपने अपने कोड के किसी भी प्रकार की जानकारी या स्पष्टीकरण नहीं दिया। यह क्या करता है? यह वर्तमान चर्चा के लिए प्रासंगिक क्यों है?

@CedSharp shallowEqual समारोह अवास्तविक लौटाते हैं, अगर हम सेट _forceUpdate = {प्रतीक ()}

@BrookShuihuaLee बहुत अच्छा होगा यदि आप अपने पहले उत्तर में इस तरह की व्याख्या शामिल कर सकते हैं, इस तरह से लोग इसे बेहतर समझेंगे ^ ^

@CedSharp हाँ

@BrookShuihuaLee : यह एक बुरे विचार की तरह लगता है। आप ऐसा क्यों करना चाहते हो?

@BrookShuihuaLee , मैं हूं ।
एक कारण है कि जब आप राज्य में बदलाव नहीं करते हैं तो आपको क्लोन वापस नहीं करना चाहिए। जब तक आप एक वैध उदाहरण प्रदान नहीं कर सकते हैं जिसमें आपका समाधान आवश्यक प्रतीत होता है, तो मैं दृढ़ता से सलाह दूंगा कि Redux कैसे काम करता है।

@CedSharp
@markerikson
क्योंकि घटक AfterConnect बार-बार डिजाइन द्वारा, फिर से चलाया जाएगा। जब इसके मूल घटक को पुनः वितरित किया जा रहा हो, तो इसे एक बार फिर से रेंडर करना ठीक है। मैं मूल घटक में सभी संगणना नहीं करना चाहता और AfterConnect के लिए सहारा के टन सेट करें।

@BrookShuihuaLee , मुझे क्षमा करें, लेकिन आपका घटक कैसे चर्चा में प्रासंगिक है?
अगर मैं ठीक से समझूं, तो आप अपने स्वयं के कस्टम घटक के बारे में बात कर रहे हैं? ForceUpdate कुछ बहुत दृढ़ता से प्रतिक्रियाशील दुनिया में हतोत्साहित है और मैं इसे एक समाधान के रूप में अनुशंसित नहीं करूंगा।

इसके बजाय, आप एक अवलोकन योग्य समाधान का उपयोग कर सकते हैं जहां आप राज्य की तुलना में कहीं और बदलाव की तलाश करते हैं? मुझे नहीं पता कि आपको उस विशिष्ट घटक को फिर से प्रस्तुत करने की आवश्यकता क्यों है, इसके बिना राज्य को संशोधित किया जा सकता है, लेकिन अगर आप जानते हैं कि इसे फिर से क्यों प्रस्तुत करना चाहिए, तो शायद आप मोबाइल जैसे कुछ का उपयोग कर सकते हैं?
(Https://github.com/mobxjs/mobx)

मैं यह समझने की कोशिश कर रहा हूं कि आपका समाधान क्या है, और यह इस स्थिति में क्यों लागू होता है।

@CedSharp मेरा मतलब यह नहीं है कि सभी को बलप्रयोग करना चाहिए। लेकिन सिफारिश एक बात है, चुनाव एक और है। रिएक्टर डेवलपर्स के लिए ReactComponent.prototype.forceUpdate भी रखें। लोगों को विकल्प चाहिए।

मैं एक और विकल्प देने की कोशिश कर रहा था। हो सकता है, यह सबसे अच्छा विकल्प न हो।

इष्टतम नहीं है, लेकिन मैंने इस समस्या में भाग लिया है क्योंकि मैंने अपने ऐप राज्य को गलत तरीके से संरचित किया है। मुझे राज्य के स्लाइस पर एक उथले क्षेत्र को अपडेट करके उथले तुलना मुद्दे के आसपास मिला जो मुझे परेशान कर रहा था।

case SOME_ACTION:
      return {
        ...state,
        ts: (new Date).getTime(),
      };

IMO, एक अच्छा समाधान नहीं है, लेकिन किसी के लिए वर्तमान में एक बाँध में (यानी आपको दिन का अंत जारी करना होगा), यह एक त्वरित समाधान है और आपको कहीं और रेंडर करने के लिए मजबूर नहीं करना है।

कोड को फिर से सक्रिय किया जाना चाहिए ताकि एक उथले तुलना, यहां तक ​​कि एक गहरी नेस्टेड स्थिति पर काम करेगा।

राज्य को अपरिवर्तनीय होना चाहिए। दीप reducer में राज्य की प्रतिलिपि बनाएँ, तो कनेक्ट में उथले तुलना पर्याप्त और प्रभावी है।

मेरी समस्या इसके भीतर सरणियों के साथ एक वस्तु थी। जैसा कि यह उथली तुलना थी, यह कभी भी बाल सरणियों के भीतर वस्तुओं तक नहीं पहुंची। मैंने इसे list:state.obj.list lists:state.obj

मुझे बस इस मुद्दे का सामना करना पड़ा, और पहले जोड़े के जवाबों को पढ़ने के बाद, मैंने अपने reducer की जाँच की और देखा कि मेरे पास वहां एक टाइपो था। मैंने एक संपत्ति का नाम बदला और INITIAL_STATE को अपडेट किया लेकिन मैं उस समस्या को बदलना भूल गया जिसे इस समस्याग्रस्त कार्रवाई द्वारा अपडेट किया जा रहा था।

मैं मूल रूप से कुछ यादृच्छिक कुंजी को अद्यतन कर रहा था जो घटक में उपयोग नहीं किया गया था, इसलिए जाहिर है, यह फिर से प्रस्तुत नहीं करेगा जब इस यादृच्छिक कुंजी को अपडेट किया गया था।

अपने लाल में TYPOS के लिए चेक! :)