स्पंदन BloC पैटर्न + प्रदाता + परीक्षण + राज्य को याद रखें

यह लेख " BLoC पैटर्न के साथ एक साधारण उदाहरण " के रूप में प्रकाशित हुआ, जहां हमने यह पता लगाया कि यह पैटर्न क्या है और इसे क्लासिक सरल काउंटर उदाहरण में कैसे लागू किया जाए।

टिप्पणियों के अनुसार और मेरी सबसे अच्छी समझ के लिए, मैंने एक आवेदन लिखने का प्रयास करने का फैसला किया जिसमें प्रश्नों के उत्तर प्राप्त होंगे:

1. उस वर्ग की स्थिति को कैसे हस्तांतरित किया जाए जिसमें ब्लोक पूरे आवेदन में स्थित है
2. इस पैटर्न के लिए परीक्षण कैसे लिखें
3. (अतिरिक्त प्रश्न) बीएलओसी पैटर्न के भीतर रहते हुए एप्लिकेशन लॉन्च के बीच डेटा स्थिति कैसे बनाए रखें

नीचे परिणामी उदाहरण का एक एनिमेशन है, और कट के नीचे एक डीब्रीफिंग है :)

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

आवेदन और आधार कोड का विवरण

बीएलओसी और प्रदाता से संबंधित नहीं

1. एप्लिकेशन में बटन + - हैं और स्वाइप करें जो इन बटनों को काम करते हैं
2. एनिमेशन फ्लैटर मिक्सिन बिल्ट-इन TickerProviderStateMixin के माध्यम से किया जाता है

बीएलओसी और प्रदाता से जुड़ा

1. दो स्क्रीन - पहले एक पर हम स्वाइप करते हैं, दूसरे पर काउंटर परिवर्तन प्रदर्शित किए जाते हैं
2. हम राज्य को फोन के स्थायी भंडारण के लिए लिखते हैं (आईओएस और एंड्रॉइड, पैकेज https://pub.dev/packages/sared_prever )
3. लगातार भंडारण से जानकारी लिखना और पढ़ना अतुल्यकालिक है, हम इसे बीएलओसी के माध्यम से भी करते हैं

हम एक आवेदन लिख रहे हैं

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

उसी समय से, जिस वर्ग में बीएलओसी स्थित है, उसका उपयोग विभिन्न स्क्रीन पर किया जाता है, हमें इस वर्ग से निर्मित वस्तु को पूरे अनुप्रयोग में स्थानांतरित करना होगा।

इसके लिए अलग-अलग तरीके हैं, अर्थात्:

1. क्लास कंस्ट्रक्टर्स के माध्यम से गुजरते हुए, तथाकथित लिफ्टिंग स्टेट अप । हम इसका उपयोग नहीं करेंगे, क्योंकि यह बहुत भ्रामक है, फिर राज्य स्थानांतरण को ट्रैक न करें।
2. उस वर्ग से बनाएं जहां हमारे पास BLoC सिंगलटन है और जहां हमारी आवश्यकता है, वहां आयात करें। यह सरल और सुविधाजनक है, लेकिन, मेरे विशुद्ध रूप से व्यक्तिगत दृष्टिकोण से, क्लास कंस्ट्रक्टर को उलझाता है और तर्क को थोड़ा भ्रमित करता है।
3. प्रदाता पैकेज का उपयोग करें - जिसे राज्य प्रबंधन के लिए फ़्लटर टीम द्वारा अनुशंसित किया गया है। वीडियो देखें

इस उदाहरण में, हम प्रदाता का उपयोग करेंगे - सभी तरीकों का एक उदाहरण देने के लिए पर्याप्त ताकत नहीं थी :)

सामान्य संरचना

तो हमारे पास एक वर्ग है

class SwipesBloc { // some stuff } 

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

 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MultiProvider( providers: [ Provider<SwipesBloc>(create: (_) => SwipesBloc()), ], child: MaterialApp( title: 'Swipe BLoC + Provider', 

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

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

बीएलओसी के लिए कक्षा

ऐसा करने के लिए, हम एक बीएलओसी वर्ग बनाते हैं जिसमें हम न केवल धाराओं का वर्णन करते हैं, बल्कि फोन की स्थायी भंडारण से स्थिति की प्राप्ति और रिकॉर्डिंग भी करते हैं।

 import 'dart:async'; import 'package:rxdart/rxdart.dart'; import 'package:shared_preferences/shared_preferences.dart'; class SwipesBloc { Future<SharedPreferences> prefs = SharedPreferences.getInstance(); int _counter; SwipesBloc() { prefs.then((val) { if (val.get('count') != null) { _counter = val.getInt('count') ?? 1; } else { _counter = 1; } _actionController.stream.listen(_changeStream); _addValue.add(_counter); }); } final _counterStream = BehaviorSubject<int>.seeded(1); Stream get pressedCount => _counterStream.stream; void get resetCount => _actionController.sink.add(null); Sink get _addValue => _counterStream.sink; StreamController _actionController = StreamController(); StreamSink get incrementCounter => _actionController.sink; void _changeStream(data) async { if (data == null) { _counter = 1; } else { _counter = _counter + data; } _addValue.add(_counter); prefs.then((val) { val.setInt('count', _counter); }); } void dispose() { _counterStream.close(); _actionController.close(); } } 

यदि हम ध्यान से इस वर्ग को देखें, तो हम देखेंगे कि:

1. बाह्य रूप से उपलब्ध कोई भी गुण धाराओं के इनपुट और आउटपुट हैं।
2. डिजाइनर में पहले भाग पर, हम फोन के स्थायी भंडारण से डेटा प्राप्त करने का प्रयास करते हैं।
3. फोन के स्थायी भंडारण में आसानी से दर्ज किया गया है

एक बेहतर समझ के लिए छोटे कार्य:

• कंस्ट्रक्टर से .then से कोड का एक टुकड़ा निकालकर एक अलग विधि बनाने के लिए प्रेट्रियर है।
• सिंगलटन के रूप में एक प्रदाता के बिना इस वर्ग को लागू करने का प्रयास करें

एप्लिकेशन में डेटा प्राप्त और संचारित करें

अब हमें बटन क्लिक करने या स्वाइप करने पर स्ट्रीम में डेटा ट्रांसफर करना होगा और यह डेटा कार्ड और अलग स्क्रीन पर प्राप्त करना होगा।

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

 return Scaffold( body: Consumer<SwipesBloc>( builder: (context, _swipesBloc, child) { return StreamBuilder<int>( stream: _swipesBloc.pressedCount, builder: (context, snapshot) { String counterValue = snapshot.data.toString(); return Stack( children: <Widget>[ Container( 

ठीक है, फिर डेटा प्राप्त करना
_swipesBloc.pressedCount,

डेटा ट्रांसफर
_swipesBloc.incrementCounter.add(1);

यह सब है, हमें बीएलओसी पैटर्न के नियमों में एक स्पष्ट और एक्स्टेंसिबल कोड मिला है।

काम करने का उदाहरण

परीक्षण

आप विगेट्स का परीक्षण कर सकते हैं, आप मोक बना सकते हैं, आप e2e कर सकते हैं।

हम विजेट्स का परीक्षण करेंगे और काउंटर की वृद्धि कैसे हुई, इस पर एक चेक के साथ एप्लिकेशन चलाएंगे। यहाँ और यहाँ परीक्षणों पर जानकारी।

विजेट परीक्षण

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

कोड यहां है , कोड में क्लिक करने के बाद काउंटर वृद्धि की जांच करने का प्रयास है - यह एक त्रुटि देता है, क्योंकि डेटा बीएलओसी के माध्यम से जाता है।

परीक्षण चलाने के लिए, कमांड का उपयोग करें
flutter test

एकीकरण परीक्षण

इस परीक्षण विकल्प में, एप्लिकेशन एमुलेटर पर चलता है, हम बटन दबा सकते हैं, स्वाइप कर सकते हैं और जांच सकते हैं कि परिणामस्वरूप क्या हुआ।

ऐसा करने के लिए, हम 2 फाइलें बनाते हैं:

test_driver / app.dart
test_driver / app_test.dart

पहले में, हम कनेक्ट करते हैं जो आवश्यक है, और दूसरे में, सीधे परीक्षण। उदाहरण के लिए, मैंने जांच की:

• प्रारंभिक अवस्था
• एक बटन दबाने के बाद काउंटर वेतन वृद्धि

 import 'package:flutter_driver/flutter_driver.dart'; import 'package:test/test.dart'; void main() { group( 'park-flutter app', () { final counterTextFinder = find.byValueKey('counterKey'); final buttonFinder = find.byValueKey('incrementPlusButton'); FlutterDriver driver; setUpAll(() async { driver = await FlutterDriver.connect(); }); tearDownAll(() async { if (driver != null) { driver.close(); } }); test('test init value', () async { expect(await driver.getText(counterTextFinder), ^_^quot quot^_^); }); test('test + 1 value after tapped', () async { await driver.tap(buttonFinder); // Then, verify the counter text is incremented by 1. expect(await driver.getText(counterTextFinder), ^_^quot quot^_^); }); }, ); } 

वहां का कोड

परीक्षण चलाने के लिए, कमांड का उपयोग करें
flutter drive --target=test_driver/app.dart

कार्य

बस अपनी समझ को गहरा करना है। आधुनिक अनुप्रयोगों (साइटों) में, रिएक्टिवएक्स से डेब्यू फ़ंक्शन अक्सर उपयोग किया जाता है।

उदाहरण के लिए:

1. खोज पट्टी में एक शब्द दर्ज किया जाता है और एक संकेत तभी निकलता है जब अक्षरों के सेट के बीच का अंतर 2 सेकंड से अधिक हो
2. जब पसंद डाल दी जाती है, तो आप प्रति सेकंड 10 बार क्लिक कर सकते हैं - डेटाबेस में लेखन तब होगा जब क्लिक में अंतराल 2-3 सेकंड से अधिक था
3. ... आदि।

कार्य: अंकों को केवल तभी बदलने के लिए जब + या - के प्रेस के बीच 2 सेकंड से अधिक समय बीत जाता है। ऐसा करने के लिए, केवल बीएलओसी वर्ग को संपादित करें, बाकी कोड समान रहना चाहिए।

वह सब है। अगर कुछ टेढ़ा या गलत है, तो यहीं या जीथब पर, आदर्श प्राप्त करने की कोशिश करें :)

सभी को अच्छा कोडिंग!