मेरी प्रतिक्रिया / Redux ऐप में मैं अक्सर सामना कर रहा हूंराज्य के साथ घटकों को लागू करने की समस्या जो पूरे ऐप में उपयोग की जानी चाहिए। सरल पॉपअप घटक को खुले / बंद राज्य के साथ एक उदाहरण के रूप में लेते हैं जिसे किसी भी पृष्ठ में पुन: उपयोग किया जा सकता है। यहाँ दो संभावित दृष्टिकोण हैं जो मैंने पाया:
उपयोग
setStateऔर "स्थानीय" reducer (मैं का उपयोग करें) recompose.withReducer जो प्रतिक्रिया के मूल निवासी के लिए सिर्फ वाक्यविन्यास चीनी हैsetState) अपने राज्य का प्रबंधन करने के लिए। यह तब तक आसान और पुन: प्रयोज्य दिखता है जब तक कि आपको अपने पृष्ठ के दूसरे भाग में घटक की स्थिति को बदलने की आवश्यकता न हो (आउट केस में बंद पॉपअप)। और आप केवल राज्य को बदलने के लिए कुछ redux कार्रवाई नहीं कह सकते।Redux स्टोर में घटक की स्थिति रखें। ऐसे दृष्टिकोण के साथ हम कॉल कर सकते हैं
closePopupAction({ id })बदलने के लिए घटक पेड़ के किसी भी स्थान परयह "स्थिति है।` लेकिन हमें किसी तरह अपने रेड्यूसर (जो कि मैं पॉपअप फ़ोल्डर में रखना चाहता हूं) को रूट रिड्यूसर पर रखना चाहिए जब घटक को माउंट किया जाता है और घटक के अनमाउंट होने पर इसे हटा दें। साथ ही हम पेज में कई गुना पॉपअप रख सकते हैं और उनमें से प्रत्येक की अपनी स्थिति है।
क्या किसी को भी इसी तरह की समस्या का सामना करना पड़ा था?
उत्तर:
उत्तर № 1 के लिए 1मुझे लगता है कि आपको घटक की स्थिति को रिडक्स में रखना चाहिए। आप इस घटक के लिए reducer बना सकते हैं और इस तरह से CombReducers फ़ंक्शन का उपयोग कर सकते हैं:
rootReducer = combineReducers({
moduleA: combineReducers({
popupA: popupReducer("id1"),
popupB: popupReducer("id2")
}),
moduleB: combineReducers({
popupA: popupReducer("id3")
})
})
});
तब जब आप closePopupAction ("id1") कहते हैं, reducer आईडी की जांच कर सकता है और राज्य के उचित हिस्से को बदल सकता है।
पुनश्च: आईडी बेहतर तरीके से प्रदान की जानी चाहिए :)
जवाब के लिए 0 № 2
आप प्रत्येक घटक को स्टोर के अपने स्लाइस पर रख सकते हैं।
तो आपका closePopupAction उस माउंट पथ के साथ कार्रवाई की जाएगी:
closePopupAction({ mountPath: "popups.popup1" })
और आपको सभी को संभालने के लिए केवल एक reducer की आवश्यकता होगी closePopupAction क्रियाएँ, जिन्हें एक बार स्टार्टअप पर पंजीकृत किया जा सकता है:
(state, { type, mountPath }) => {
if (type === "CLOSE_POPUP_ACTION") {
// manipulate with the slice at `mountPath`, e.g.
return _.set(_.cloneDeep(state), `${mountPath}.isOpen`, false)
}
// ...
}