इसलिए मैंने एक सप्ताह पहले ही रिएक्ट सीखना शुरू कर दिया था और मुझे अनिवार्य रूप से राज्य की समस्या के बारे में पता चला और घटकों को बाकी ऐप के साथ संवाद करना चाहिए। मैंने चारों ओर खोज की और Redux को महीने का स्वाद प्रतीत हो रहा है। मैं सभी प्रलेखन के माध्यम से पढ़ा और मुझे लगता है कि यह वास्तव में एक बहुत ही क्रांतिकारी विचार है। इस पर मेरे विचार हैं:
राज्य आमतौर पर बहुत बुराई और प्रोग्रामिंग में बग का एक बड़ा स्रोत होने के लिए सहमत है। अपने पूरे ऐप में इसे बिखरने के बजाय Redux कहता है कि क्यों न यह सब एक वैश्विक राज्य वृक्ष में केंद्रित हो गया है जिसे बदलने के लिए आपको क्रियाओं का उत्सर्जन करना होगा? दिलचस्प लगता है। सभी कार्यक्रमों को राज्य की आवश्यकता होती है तो चलो इसे एक अशुद्ध स्थान पर चिपका दें और केवल इसे वहां से संशोधित करें ताकि बग को ट्रैक करना आसान हो। फिर हम प्रतिक्रियाशील घटकों के लिए व्यक्तिगत रूप से अलग-अलग राज्य के टुकड़े भी बांध सकते हैं और उन्हें ऑटो-रिड्रा कर सकते हैं और सब कुछ सुंदर है।
हालाँकि, इस पूरे डिज़ाइन के बारे में मेरे दो सवाल हैं। एक के लिए, राज्य वृक्ष को अपरिवर्तनीय होने की आवश्यकता क्यों है? कहो कि मैं समय यात्रा डिबगिंग, हॉट रीलोड के बारे में परवाह नहीं करता हूं, और अपने ऐप में पूर्ववत / फिर से लागू कर चुका हूं। ऐसा करना इतना बोझिल लगता है:
case COMPLETE_TODO:
return [
...state.slice(0, action.index),
Object.assign({}, state[action.index], {
completed: true
}),
...state.slice(action.index + 1)
];
इसके अलावा:
case COMPLETE_TODO:
state[action.index].completed = true;
उल्लेख नहीं करने के लिए मैं सिर्फ सीखने के लिए एक ऑनलाइन व्हाइटबोर्ड बना रहा हूं और प्रत्येक राज्य परिवर्तन कमांड सूची में ब्रश स्ट्रोक जोड़ने के रूप में सरल हो सकता है। थोड़ी देर (सैकड़ों ब्रश स्ट्रोक) के बाद इस पूरे सरणी को डुप्लिकेट करना बहुत महंगा और समय लेने वाला बन सकता है।
मैं एक वैश्विक राज्य वृक्ष के साथ ठीक हूं जो कि यूआई से स्वतंत्र है जो कार्यों के माध्यम से उत्परिवर्तित है, लेकिन क्या वास्तव में अपरिवर्तनीय होने की आवश्यकता है? इस तरह के एक साधारण कार्यान्वयन में क्या गलत है (बहुत मोटा मसौदा? 1 मिनट में लिखा गया)।
var store = { items: [] };
export function getState() {
return store;
}
export function addTodo(text) {
store.items.push({ "text": text, "completed", false});
}
export function completeTodo(index) {
store.items[index].completed = true;
}
यह अभी भी एक वैश्विक राज्य वृक्ष है जो उत्सर्जित क्रियाओं के माध्यम से उत्परिवर्तित होता है लेकिन अत्यंत सरल और कुशल है।
immutablejsऔर उपयोगreturn state.setIn([action.index, 'completed'], true);करें।