Redux के साथ संयोजन में स्पंदन पर एक आवेदन पत्र लिखना

सभी को नमस्कार! इस लेख में, मैं आपको Redux का उपयोग करके फ़्लटर एप्लिकेशन बनाने का तरीका बताना चाहूंगा। यदि आपको पता नहीं है कि स्पंदन क्या है , तो यह Google से मोबाइल एप्लिकेशन बनाने के लिए एक खुला स्रोत एसडीके है। इसका उपयोग एंड्रॉइड और आईओएस के लिए एप्लिकेशन विकसित करने के लिए किया जाता है, और यह Google फूशिया के लिए एप्लिकेशन विकसित करने का एकमात्र तरीका भी है।

यदि आप फ़्लटर से परिचित हैं और एक ऐसा एप्लिकेशन बनाना चाहते हैं जो अच्छी तरह से डिज़ाइन किया गया हो, परीक्षण करने में आसान हो, और बहुत पूर्वानुमानित व्यवहार हो, तो इस लेख को पढ़ना जारी रखें और आपको जल्द ही पता चल जाएगा!

लेकिन इससे पहले कि हम आवेदन लिखना शुरू करें। आइए सिद्धांत से थोड़ा परिचित हो जाएं, चलो Redux क्या है यह समझाकर शुरू करें।

Redux क्या है?

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

1. सत्य का एकमात्र स्रोत - आपके आवेदन की पूरी स्थिति केवल एक ही स्थान पर संग्रहीत होती है (जिसे स्टोर कहा जाता है )।
2. राज्य केवल पढ़ने के लिए है / राज्य केवल पढ़ने के लिए है - आवेदन की स्थिति को बदलने के लिए, आपको कार्रवाई (कार्रवाई) भेजने की आवश्यकता है, जिसके बाद एक नया राज्य बनाया जाएगा
3. शुद्ध कार्यों / शुद्ध कार्यों का उपयोग करके परिवर्तन किए जाते हैं - एक शुद्ध कार्य (सादगी के लिए, यह दुष्प्रभावों के बिना एक कार्य है) वर्तमान स्थिति को लागू करता है और कार्रवाई करता है और आवेदन की नई स्थिति को लौटाता है

नोट: फ़ंक्शन का एक पक्ष प्रभाव इसकी गणना करने की प्रक्रिया में क्षमता है: वैश्विक चर के मूल्यों को पढ़ना और संशोधित करना, I / O संचालन करना, असाधारण स्थितियों का जवाब देना, और उनके हैंडलर को कॉल करना। यदि आप एक फ़ंक्शन प्रभाव के साथ दो बार इनपुट तर्क मानों के सेट के साथ एक फ़ंक्शन कहते हैं, तो ऐसा हो सकता है कि परिणाम के रूप में विभिन्न मान लौटाए जाएं। ऐसे कार्यों को साइड इफेक्ट के साथ गैर-नियतात्मक कार्य कहा जाता है।

शांत लगता है, लेकिन इस समाधान के क्या लाभ हैं?

• राज्य / राज्य पर हमारा नियंत्रण है - इसका मतलब है कि हम जानते हैं कि राज्य में बदलाव का कारण क्या है, हमारे पास डुप्लिकेट स्थिति नहीं है, और हम आसानी से डेटा प्रवाह की निगरानी कर सकते हैं
• Reducer शुद्ध कार्य हैं जिनका परीक्षण करना आसान है - हम राज्य को पारित कर सकते हैं, इनपुट पर कार्रवाई कर सकते हैं और जांच सकते हैं कि क्या परिणाम सही है
• एप्लिकेशन को स्पष्ट रूप से संरचित किया गया है - हमारे पास कार्यों, मॉडल, व्यावसायिक तर्क आदि के लिए अलग-अलग परतें हैं - इसलिए आप जानते हैं कि वास्तव में एक और नई सुविधा कहां से जोड़ना है
• यह अधिक जटिल अनुप्रयोगों के लिए एक महान वास्तुकला है - आपको माता-पिता से बच्चे तक अपने विचार के पूरे पेड़ के पार राज्य नहीं करना होगा
• और एक और है ...

Redux समय यात्रा

Redux में एक दिलचस्प अवसर है - टाइम ट्रैवल! Redux और संबंधित उपकरणों के साथ, आप समय के साथ अपने आवेदन की स्थिति को ट्रैक कर सकते हैं, वास्तविक स्थिति की जांच कर सकते हैं और किसी भी समय इसे पुनः बना सकते हैं। कार्रवाई में यह सुविधा देखें:

सरल उदाहरण के साथ Redux विजेट्स

उपरोक्त सभी नियम Redux में डेटा प्रवाह को यूनिडायरेक्शनल बनाते हैं। लेकिन इसका क्या मतलब है? व्यवहार में, यह सब कार्रवाई , रिड्यूसर , स्टोर और राज्यों का उपयोग करके किया जाता है । आइए एक आवेदन की कल्पना करें जो एक काउंटर प्रदर्शित करता है:

1. स्टार्टअप पर आपके एप्लिकेशन की एक निश्चित स्थिति है (क्लिक की संख्या, जो 0 है)
2. इस स्थिति के आधार पर, दृश्य प्रदान किया जाता है।
3. यदि उपयोगकर्ता बटन पर क्लिक करता है, तो कार्रवाई भेजी जाती है (उदाहरण के लिए, इंक्रीमेंटकाउंटर)
4. उसके बाद, एक्शन को एक रेड्यूसर प्राप्त होता है जो पिछली स्थिति (काउंटर 0) को जानता है, और एक्शन (इंक्रीमेंटकाउंटर) प्राप्त करता है और एक नया स्टेट लौटा सकता है (काउंटर अब 1 है)
5. हमारे आवेदन में एक नया राज्य है (काउंटर 1 है)
6. नए राज्य के आधार पर, दृश्य को फिर से परिभाषित किया गया है, जो वर्तमान स्थिति को प्रदर्शित करता है

इसलिए, जैसा कि आप देख सकते हैं, यह आमतौर पर सभी राज्य के बारे में है । आपके पास पूरे एप्लिकेशन का एक राज्य है, राज्य केवल-पढ़ने के लिए है, और एक नया राज्य बनाने के लिए आपको कार्रवाई भेजने की आवश्यकता है। क्रियाओं को सबमिट करने से एक रिड्यूसर लॉन्च होता है, जो हमें एक नया राज्य बनाता है और देता है। और कहानी खुद को दोहराती है।


आइए एक छोटा सा एप्लिकेशन बनाएं और एक्शन में Redux एप्रोच को लागू करने के बारे में जानें, एप्लिकेशन को " शॉपिंग लिस्ट " कहा जाएगा।

हम देखेंगे कि Redux कैसे काम करता है। हम एक सरल शॉपिंग कार्ट ऐप बनाएंगे। एप्लिकेशन में ऐसी विशेषताएं होंगी:

• खरीदारी जोड़ रहा है
• पूर्ण के रूप में खरीद को चिह्नित करना संभव होगा
• और वह मूल रूप से सभी है

आवेदन इस तरह दिखेगा:


कोड लिखना शुरू करें!

मांग

इस आलेख में, मैं इस एप्लिकेशन के लिए उपयोगकर्ता इंटरफ़ेस का निर्माण नहीं दिखाऊंगा। आप अपने आप को उस कोड से परिचित कर सकते हैं जिसे मैंने Redux डाइव के साथ जारी रखने से पहले आपके लिए तैयार किया था । जिसके बाद हम कोड लिखना जारी रखेंगे और वर्तमान एप्लिकेशन में Redux जोड़ देंगे।

नोट: यदि आपने पहले कभी भी Flutter का उपयोग नहीं किया है, तो मेरा सुझाव है कि आप Google से Flutter Codelabs की कोशिश करें।

प्रारंभिक तैयारी

फ़्लटर के लिए Redux का उपयोग शुरू करने के लिए, हमें pubspec.yaml फ़ाइल पर निर्भरता जोड़ने की आवश्यकता है:

flutter_redux: ^0.5.2 

आप इस निर्भरता के वर्तमान संस्करण को flutter_redux पृष्ठ पर जाकर भी देख सकते हैं।

लेखन के समय, संस्करण था, flutter_redux 0.6.0

आदर्श

हमारे एप्लिकेशन को तत्वों के जोड़ और संशोधन को नियंत्रित करने में सक्षम होना चाहिए, इसलिए हम एक तत्व की स्थिति को संग्रहीत करने के लिए एक सरल कार्ट इट मॉडल का उपयोग करेंगे। हमारे सभी एप्लिकेशन स्टेट सिर्फ कार्टिम्स की एक सूची होगी। जैसा कि आप देख सकते हैं, CartItem सिर्फ एक वस्तु है।

 class CartItem { String name; bool checked; CartItem(this.name, this.checked); } 

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

 class AddItemAction { final CartItem item; AddItemAction(this.item); } class ToggleItemStateAction { final CartItem item; ToggleItemStateAction(this.item); } 

फिर हमें अपने आवेदन को यह बताने की आवश्यकता है कि इन कार्यों का क्या करना है। यही कारण है कि reducers का उपयोग किया जाता है - वे सिर्फ आवेदन की वर्तमान स्थिति और कार्रवाई (आवेदन राज्य और कार्रवाई) लेते हैं, फिर एक नया राज्य बनाते हैं और वापस करते हैं। हम दो reducer तरीके होंगे:

 List<CartItem> appReducers(List<CartItem> items, dynamic action) { if (action is AddItemAction) { return addItem(items, action); } else if (action is ToggleItemStateAction) { return toggleItemState(items, action); } return items; } List<CartItem> addItem(List<CartItem> items, AddItemAction action) { return List.from(items)..add(action.item); } List<CartItem> toggleItemState(List<CartItem> items, ToggleItemStateAction action) { return items.map((item) => item.name == action.item.name ? action.item : item).toList(); } 

AppReducers () विधि उचित विधियों के लिए कार्रवाई को दर्शाता है । दोनों addItem () और toggleItemState () विधियाँ नई सूची लौटाती हैं - यह हमारी नई स्थिति / स्थिति है। जैसा कि आप देख सकते हैं, आपको वर्तमान सूची को नहीं बदलना चाहिए । इसके बजाय, हम हर बार एक नई सूची बनाते हैं।

StoreProvider

अब जब हमारे पास कार्रवाई और रिड्यूसर हैं , तो हमें एप्लिकेशन की स्थिति को संग्रहीत करने के लिए एक जगह प्रदान करने की आवश्यकता है। Redux में, इसे स्टोर कहा जाता है और यह एप्लिकेशन के लिए सत्य का एकमात्र स्रोत है।

 void main() { final store = new Store<List<CartItem>>( appReducers, initialState: new List()); runApp(new FlutterReduxApp(store)); } 

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

 class FlutterReduxApp extends StatelessWidget { final Store<List<CartItem>> store; FlutterReduxApp(this.store); @override Widget build(BuildContext context) { return new StoreProvider<List<CartItem>>( store: store, child: new ShoppingCartApp(), ); } } 

उपरोक्त उदाहरण में, ShoppingCartApp ( ) हमारे एप्लिकेशन का मुख्य विजेट है।

StoreConnector

वर्तमान में हमारे पास छोड़कर सब कुछ है ... वास्तव में आइटमों को जोड़ना और बदलना। यह कैसे करना है? इसे संभव बनाने के लिए, हमें StoreConnector का उपयोग करने की आवश्यकता है। यह स्टोर प्राप्त करने और इसे कुछ कार्रवाई भेजने या वर्तमान स्थिति प्राप्त करने का एक तरीका है।

सबसे पहले, हम वर्तमान डेटा प्राप्त करना चाहते हैं और इसे स्क्रीन पर एक सूची के रूप में प्रदर्शित करना चाहते हैं:

 class ShoppingList extends StatelessWidget { @override Widget build(BuildContext context) { return new StoreConnector<List<CartItem>, List<CartItem>>( converter: (store) => store.state, builder: (context, list) { return new ListView.builder( itemCount: list.length, itemBuilder: (context, position) => new ShoppingListItem(list[position])); }, ); } } 

ऊपर के कोड को एक StoreConnector के साथ ListView.builder लपेटता है। StoreConnector वर्तमान स्थिति (जो वस्तुओं की एक सूची है ) को स्वीकार कर सकता है और मानचित्र कार्यों की सहायता से हम इसे किसी भी चीज़ में बदल सकते हैं। लेकिन हमारे मामले में यह एक ही राज्य (सूची) होगा, क्योंकि यहां हमें खरीदारी सूची की आवश्यकता है।

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

ठीक है, अच्छा - हमारे पास डेटा है। अब, कुछ डेटा कैसे सेट करें?

इसके लिए, हम StoreConnector का भी उपयोग करेंगे, लेकिन थोड़े अलग तरीके से।

 class AddItemDialog extends StatelessWidget { @override Widget build(BuildContext context) { return new StoreConnector<List<CartItem>, OnItemAddedCallback>( converter: (store) { return (itemName) => store.dispatch(AddItemAction(CartItem(itemName, false))); }, builder: (context, callback) { return new AddItemDialogWidget(callback); }); } }typedef OnItemAddedCallback = Function(String itemName); 

कोड को देखते हैं। हमने पिछले उदाहरण के रूप में StoreConnector का उपयोग किया, लेकिन इस बार उसी सूची के साथ CartItems सूची के मिलान के बजाय, हम OnItemAddedCallback में एक मानचित्र रूपांतरण करेंगे । इस प्रकार, हम AddItemDialogWidget पर कॉलबैक फ़ंक्शन को पास कर सकते हैं और उपयोगकर्ता द्वारा एक नया तत्व जोड़ने पर कॉल कर सकते हैं :

 class AddItemDialogWidgetState extends State<AddItemDialogWidget> { String itemName; final OnItemAddedCallback callback; AddItemDialogWidgetState(this.callback); @override Widget build(BuildContext context) { return new AlertDialog( ... actions: <Widget>[ ... new FlatButton( child: const Text('ADD'), onPressed: () { ... callback(itemName); }) ], ); } } 

अब जब भी उपयोगकर्ता ADD बटन पर क्लिक करता है, कॉलबैक फ़ंक्शन AddItemAction () भेजता है।

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

 class ShoppingListItem extends StatelessWidget { final CartItem item; ShoppingListItem(this.item); @override Widget build(BuildContext context) { return new StoreConnector<List<CartItem>, OnStateChanged>( converter: (store) { return (item) => store.dispatch(ToggleItemStateAction(item)); }, builder: (context, callback) { return new ListTile( title: new Text(item.name), leading: new Checkbox( value: item.checked, onChanged: (bool newValue) { callback(CartItem(item.name, newValue)); }), ); }); } } 

पिछले उदाहरण के रूप में, हम OnStateChanged कॉलबैक फ़ंक्शन के लिए सूची प्रदर्शित करने के लिए StoreConnector का उपयोग करते हैं । अब जब भी झंडा बदलता है (ऑनचेंज विधि में), कॉलबैक फ़ंक्शन टॉगलइमस्टैब्यूशन इवेंट को फायर करता है।

सारांश

वह सब है! इस लेख में, हमने एक सरल एप्लिकेशन बनाया, जो खरीदारी सूची प्रदर्शित करता है और Redux आर्किटेक्चर का उपयोग करने में थोड़ा डूब जाता है। हमारे आवेदन में, हम तत्वों को जोड़ सकते हैं और उनकी स्थिति बदल सकते हैं। इस एप्लिकेशन में नई सुविधाओं को जोड़ना नई क्रियाओं और रिड्यूसर को जोड़ना जितना आसान है।

यहां आप टाइम ट्रेवल विजेट सहित इस एप्लिकेशन के स्रोत कोड को पा सकते हैं:

आशा है आपको यह पोस्ट अच्छी लगी होगी!