Redux: mapStateToProps () नहीं कहा जा रहा है

क्या आप http://redux.js.org/docs/Troublesourcing.html से

मैं एक वस्तु के रूप में स्टोर के बारे में सोचता हूं, ऐसे गुणों के साथ जो एप्लिकेशन की स्थिति के बारे में डेटा रखता है। वे शीर्ष-स्तरीय गुण वे ऑब्जेक्ट हो सकते हैं जो एप्लिकेशन के एक हिस्से के बारे में जानकारी रखने के लिए एक उप-वृक्ष प्रदान करते हैं। क्या ये सच है?

हाँ। स्टोर शीर्ष-स्तरीय स्थिति ऑब्जेक्ट को आंतरिक रूप से रखता है। यह store.getState() से उस वस्तु तक पहुंच प्रदान करता है। वह ऑब्जेक्ट जो आप रूट रिड्यूसर से लौटते हैं, से मेल खाता है, और यह अक्सर पेड़ जैसा होता है।

जब कोई कार्रवाई स्टोर में भेजी जाती है, तो क्या संपत्ति (या स्टोर का उप-पेड़) अपडेट हो जाती है? ऐसा लगता है कि स्टोर के भीतर एक संपत्ति के लिए एक स्वचालित निर्माण / संघ है, लेकिन यह कैसे निर्धारित किया जाता है?

नहीं, किसी भी चीज का स्वत: निर्माण नहीं होता है। स्टोर केवल आपके रूट reducer को कॉल करने के परिणाम की ओर इशारा करना शुरू करता है।

यदि आपका रूट रिड्यूसर एक फ़ंक्शन है जिसे आपने स्वयं लिखा है, तो इसका परिणाम वह है जो आपको एक कार्रवाई भेजने के बाद मिलेगा:

function counter(state = 0, action) {
  if (action.type === 'INCREMENT') {
    return state + 1; // will become the next value of store.getState() after store.dispatch()
  }
  return state;
}

यदि आप combineReducers({ foo, bar }) जैसी किसी चीज़ के साथ मूल reducer _ _enerate_ करते हैं, तो यह वैसा ही है जैसे आपने हाथ से एक रूट reducer लिखा है जो इस तरह दिखता है:

function root(state = {}, action) {
  return {
    foo: foo(state.foo, action),
    bar: bar(state.bar, action)
  }
}

यह वह जगह है जहां राज्य पर गुण अक्सर आते हैं। उनके मूल्य इस बात से निर्धारित होते हैं कि आपके foo और bar रिड्यूसर क्रमशः कार्रवाई करते हुए वापस आ गए हैं, इसलिए फिर से आप उनके पूर्ण नियंत्रण में हैं।

उचित संपत्ति / स्टोर के भाग के अपडेट को सुनने के लिए mapStateToProps "कैसे" जानता है? क्या उन्हें एक साथ जोड़ता है?

आप mapStateToProps से connect() फ़ंक्शन पास करते हैं। यह एक घटक उत्पन्न करता है जो स्टोर में हर बदलाव को सुनने के लिए store.subscribe() का उपयोग करता है। जब स्टोर बदल गया है, तो उत्पन्न घटक store.getState() पढ़ता है और इसे पास करने के लिए अगले सहारा को निर्धारित करने के लिए mapStateToProps() पास करता है। यदि वे बदल गए, तो यह आपके घटक को उनके साथ फिर से प्रस्तुत करेगा।

मैं यह कैसे डिबग कर सकता हूं? मुझे यह पता लगाने के लिए क्या करने की आवश्यकता है कि कार्रवाई को भेजने के लिए मैपस्टैटटूप्रॉप्स को आग क्यों नहीं लगती है?

Https://github.com/theaqua/redux-logger जैसे एक मिडलवेयर जोड़ें mapStateToProps भी बुलाया नहीं जाता है, तो इसका मतलब है कि

• या तो आप dispatch() एक एक्शन को भूल गए और सिर्फ एक्शन क्रिएटर कहलाए,
• या आपके reducer ने समान रूप से समान मूल्य लौटाया इसलिए connect() mapStateToProps() कॉल करने से परेशान नहीं हुए।

इन दोनों मामलों का वर्णन http://redux.js.org/docs/Troublesourcing.html पर किया गया है।

भविष्य में, हम पूछते हैं कि आप सबसे पहले StackOverflow पर सवाल पूछने की कोशिश करते हैं, और समस्या ट्रैकर का उपयोग करते हैं जब आपको विश्वास होता है कि पुस्तकालय में एक बग है जिसे आप साझा कर सकते हैं एक उदाहरण के साथ लगातार पुन: पेश करने में सक्षम हैं।

धन्यवाद!

क्रम में उत्तर देना:

• Redux आम तौर पर मानता है कि आपके राज्य के पेड़ का शीर्ष टुकड़ा एक सादा जावास्क्रिप्ट वस्तु है (हालाँकि यह Immutable.js लाइब्रेरी द्वारा उपलब्ध कराए गए डेटा प्रकारों का उपयोग करने के लिए भी आम है)। आप उस वस्तु के अंदर क्या डालते हैं और आप किस तरह से संरचना बनाते हैं, यह पूरी तरह आप पर निर्भर है। सबसे आम दृष्टिकोण डोमेन द्वारा चीजों को व्यवस्थित करना है। उदाहरण के लिए, एक काल्पनिक ब्लॉग ऐप के लिए एक राज्य का पेड़ लग सकता है: { users : {}, posts : {}, comments : {}, ui : {} } । Http://redux.js.org/docs/FAQ.html#reducers -share-state और http://redux.js.org/docs/FAQ.html#organizing -state-nested-data देखें।
• तकनीकी रूप से बोलते हुए, जब आप अपना स्टोर बनाते हैं तो आप एक _single_ "reducer" फ़ंक्शन को परिभाषित करते हैं। उस फ़ंक्शन को वर्तमान स्थिति और आने वाली कार्रवाई के साथ कहा जाता है, और एक नई राज्य वस्तु को वापस करने के लिए जिम्मेदार है, _all_ उपयुक्त अपडेट के साथ, एक अपरिवर्तनीय फैशन में किया जाता है (यानी, कोई प्रत्यक्ष इन-एड संपादन नहीं है - सब कुछ जिसे अपडेट करने की आवश्यकता है कॉपियाँ बनाने, उन्हें संशोधित करने और इसके बजाय प्रतियाँ वापस करने और किसी नेस्टेड फ़ील्ड को अपडेट करने का अर्थ है कि अपने सभी पूर्वजों की प्रतिलिपि बनाना और अपडेट करना)। हालाँकि, जब से प्रत्येक अंतिम तर्क अद्यतन को एक विशाल समारोह में रखा जाता है, यह एक बुरा विचार है, अद्यतन तर्क लगभग हमेशा छोटे पुन: प्रयोज्य उप-रेड्यूसर कार्यों में टूट जाता है। आप किस तरह से उस तर्क को फिर से तैयार करते हैं, लेकिन कुछ भी स्वचालित रूप से अपडेट नहीं होता है - ऐसा करने के लिए आपके रीड्यूसर तर्क पर निर्भर है। Redux के साथ आने वाली combineReducers उपयोगिता एक विशिष्ट Reducer फ़ंक्शन को आसान बनाती है जो डेटा के दिए गए स्लाइस के अपडेट को प्रबंधित करने के लिए ज़िम्मेदार है, जैसे: const combinedReducer = combineReducers({users : userReducer, posts : postReducer, comments : commentsReducer, ui : uiReducer});
• जब भी स्टोर के माध्यम से _any_ एक्शन चलाया जाता है तो Redux सभी ग्राहकों को सूचित करता है। रिएक्ट Redux connect() फ़ंक्शन सब्सक्राइब करता है, और फिर घटक के mapStateToProps को कॉल करता है यह देखने के लिए कि पिछली बार के बाद से कोई भी निकाला गया डेटा बदल गया है या नहीं। कोई विशिष्ट नेस्टेड राज्य सदस्यता नहीं है। Http://redux.js.org/docs/FAQ.html#store -setup-सदस्यताएँ देखें।
• अपडेट नहीं होने वाले घटक का नंबर एक कारण आपके रिड्यूसर में स्थिति का प्रत्यक्ष परिवर्तन है। Http://redux.js.org/docs/FAQ.html#react -not-rerendering देखें। इसके अलावा, आपके द्वारा डीबग और लॉग कार्रवाई करने के लिए उपयोग किए जा सकने वाले ऐडऑन की संख्या है। मेरे पास उनमें से एक गुच्छा है जो https://github.com/markerikson/redux-ecosystem-links/blob/master/devtools.md पर सूचीबद्ध है

उम्मीद है कि स्पष्ट चीजों में मदद करता है।

उस से परे, जैसा कि डैन ने कहा: आमतौर पर स्टैक ओवरफ्लो के लिए उपयोग प्रश्न बेहतर होते हैं। इसके अलावा, डिस्कॉर्ड पर रिएक्टिफ्लक्स समुदाय में चैट चैनलों का एक समूह है, जो Redux सहित रिएक्ट से संबंधित तकनीकों के लिए समर्पित है, और हमेशा सवालों के जवाब देने के इच्छुक लोगों के आसपास लटका रहता है। Https://www.reactiflux.com पर एक निमंत्रण लिंक है।

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

http://redux.js.org/docs/faq/ReactRedux.html#why -isnt- मेरा घटक-पुनः-प्रतिपादन-या-मेरा-मानचित्रस्टैटोप्रोप-रनिंग

@ रिचब-हैंगओवर मेरे मामले में, @gaearon ने इस मुद्दे का पता लगाया:

या आपके रिड्यूसर ने समान रूप से समान मान लौटाया ताकि कनेक्ट () मैपस्टैटटॉप्रोप्स () को कॉल करने से परेशान न हो।

मैं इस फिक्स का उपयोग कर रहा था और यह परिणामी कोड था

const mapStateToProps = (state, props) => {
    return { id: props.id, currentState: state[props.id] };
}

const mapDispatchToProps = (dispatch) => {
    return {
        increment: (id) => {
            dispatch({ type: 'INCREMENT', id: id })
        }
    }
}

const DumbListItem = ({
    increment,
    id,
    currentState
}) => (
        <div>
            <li onClick={() => increment()}>{id}</li>
            <span>{currentState}</span>
        </div>
    );

export const ConnectedListItem = connect(
    mapStateToProps,
    mapDispatchToProps
)(DumbListItem);

चूंकि मैंने वेतन वृद्धि कॉल में id पैरामीटर को पारित नहीं किया था (या तो टेम्पलेट में increment(id) , या mapDispatchToProps में दूसरे पैरामीटर के माध्यम से), स्टोर ने नहीं किया सही ढंग से अपडेट करें ताकि जाँच करें कि शायद आपका मुद्दा है।