Redux टूलकिट की अब आवश्यकता नहीं है?

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

रूप की कहानी


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



हमेशा की तरह, हमने समस्या का वर्णन शुरू किया और निम्नलिखित प्राप्त किया:

  • प्रत्येक डेवलपर के पास कोड लिखते समय अपना स्वयं का सूक्ष्म उच्चारण होता है, "depersonalized code" की अवधारणा के कार्यान्वयन को प्राप्त करना मुश्किल है;
  • बहुत सारे कोड (बॉयलरप्लेट, कॉपी-पेस्ट और आने वाली सभी समस्याएं), सीआरयूडी पर 100+ लाइनें;
  • बुनियादी चीजों को लिखने में बहुत समय व्यतीत होता है। आप एक बात भूल जाएंगे, अन्य: लोडिंग सेट करें, त्रुटियों को संभालें, आदि;
  • स्टोर की संरचना परियोजना से परियोजना के बीच भिन्न होती है, और कभी-कभी परियोजना के विभिन्न हिस्सों के बीच।

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

जहां पीएम दिन में अधिक से अधिक एक जोड़े को पाने के लिए व्याकुल थे, वहीं कुछ ऐसे उत्साही लोग भी थे, जिन्होंने एक सरल विचार को लागू किया। हां, सरल विचार, उनके आने के बाद, हमेशा सरल लगते हैं। और विचार यह था: कोड के अलग-अलग टुकड़ों को मैन्युअल रूप से लिखने के बजाय इसे फिर से लिखना। मैं स्निपेट का उपयोग नहीं करना चाहता था और बाहर निकलने पर चादरें प्राप्त करता था, क्योंकि किसी भी परिवर्तन के कारण आपदा और बार-बार होने वाले परिवर्तन होते हैं, इसलिए जल्दी से एक फ़ंक्शन को देखा, जो इनपुट और निर्मित reducer, एक्शन और गाथा के रूप में कुछ मापदंडों को लेता है। तो संचार का पहला संस्करण पैदा हुआ ( @ axmit / redux-Communications)) "संचार" नाम का जन्म किसी तरह अपने आप हुआ, क्योंकि यह पुस्तकालय सागा और घटकों को एक साथ जोड़ता है। और इसलिए यह चला गया ...

उसके तुरंत बाद, खुशी आई। खैर, या लगभग तुरंत। विकास का समय लगभग 20% कम हो गया (जैसा कि हमने इसकी गणना की - एक अलग लेख का विषय)। सबसे पहले, क्रॉलिंग कीड़े की संख्या में उल्लेखनीय कमी के कारण। और यह इस तथ्य का उल्लेख नहीं करना है कि डेवलपर्स को असावधानी से बेवकूफ बनाने की बहुत कम संभावना है।



लिनुस टोरवाल्ड्स ने एक बार कहा था: “चटर बेकार है। मुझे कोड दिखाओ। ”और मैं उससे पूरी तरह सहमत हूँ। मैंने डॉक को उद्धृत या फिर से लिखा नहीं किया है या यहां कोड शीट दे रहा हूं मैं केवल एक छोटा सा उदाहरण दूंगा। पुस्तकालय के एक पूर्ण विवरण के लिंक और उदाहरणों के साथ एक सैंडबॉक्स भी लेख के अंत में पाया जा सकता है।

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

1. परिवहन का वर्णन करें, इसके बिना कहीं भी

const basePath = `/api/task`;

const taskTransport = {
   add: task => axios.post(`basePath`, task).then(r => r.data),
   get: id => axios.get(`${basePath}/${id}`).then(r => r.data),
   update: task => axios.put(`${basePath}/${task.id}`, task).then(r => r.data),
   delete: id => axios.delete(`${basePath}/${id}`, task),
   getCollection: () => axios.get(basePath).then(r => r.data)
};

2. नाम नाम स्थान का वर्णन करें
const namespace = 'task';

3. संचार बनाने के लिए एक रणनीति बनाएं
const strategy = new CRUDStrategy({
   namespace,
   transport: taskTransport
});

4. संचार बनाएँ
const taskCommunication = buildCommunication(strategy);

5. संचार से रिड्यूसर और सागा को हमेशा की तरह कनेक्ट करें
taskCommunication.reducers
taskCommunication.sagas

6. इसके बाद, यह पक्ष को घटक से जोड़ने के लिए बना रहता है
taskCommunication.injector(MyComponent)

7. और उपयोग करना शुरू करें
componentDidMount() {
   const { getTaskCollection } = this.props;
   getTaskCollection();
}

render() {
   const { taskCollection } = this.props;
   return  taskCollection.data.map(item => <span>{item.title}</span>)
}

वास्तव में, परिवहन और घटक दोनों को किसी भी मामले में बनाने की आवश्यकता होगी, और पूर्ण संचार कोड इस प्रकार है:

import { taskTransport } from './task.transport';
import { CRUDStrategy, buildCommunication, StoreBranch } from '@axmit/redux-communications';
 
const namespace = 'task';
 
const strategy = new CRUDStrategy({
   namespace,
   transport: taskTransport
});
 
export const taskCommunication = buildCommunication(strategy);


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

अब क्यों?


एक लेख लिखने का निर्णय इस लेख को पढ़ने के बाद आया इस उपकरण को रोकते हुए, मुझे यह जानकर आश्चर्य हुआ कि संचार बहुत सरल हैं, अधिक संक्षिप्त हैं, स्टोर की अधिक स्पष्ट संरचना देते हैं और साथ ही लचीलेपन में हीन नहीं हैं। उदाहरण के लिए Redux-Toolkit से स्रोतों के साथ एक घंटे तक बैठने और छांटने के बाद, मैंने इसे संचार के लिए फिर से लिखा। मैंने अंतर को ट्रैक करना आसान बनाने के लिए कम से कम बदलाव करने की कोशिश की, हालांकि, मेरी राय में, उदाहरण की संरचना बहुत भ्रमित है। मैंने विशेष रूप से कोड पर टिप्पणियां छोड़ दीं ताकि यह तुलना करना आसान हो सके कि यह कैसे था और यह कैसे बन गया। * .Communication.ts फ़ाइलों और स्लाइस पर ध्यान दें जो वे प्रतिस्थापित करते हैं।



तथ्य यह है कि लाइनों की संख्या बहुत छोटी है और कोड स्वयं बहुत अधिक सुखद (व्यक्तिपरक) दिखता है, क्योंकि यह बहुत महत्वपूर्ण नहीं है ठेस में हम बहुत भारी संचार है। एक और महत्वपूर्ण अंतर है। कोड घोषणात्मक है। हम केवल यह निर्धारित करते हैं कि हमें क्या और कहां प्राप्त करना है और डेटा के साथ क्या करना है, और यह कैसे करना है - हम बिल्कुल भी परवाह नहीं करते हैं।
निष्कर्ष - रिड्यूक्स-टूलकिट का उपयोग अनुकूलन के लिए किया जाना चाहिए , बाकी सब कुछ के लिए मास्टरका ... @ एक्समिट / रीडक्स-संचार है

संक्षेप में


  • कोड सभी परियोजनाओं और सभी डेवलपर्स के साथ संगत हो गया है। समान समस्याओं को समान रूप से हल किया जाता है, और समाधान अक्सर अलग-अलग पैकेजों में वितरित किए जाते हैं और भविष्य में पुन: उपयोग किए जाते हैं। इसी समय, कोड की मात्रा में काफी कमी आई है।
  • जून को स्पष्ट और समझने योग्य प्रवाह प्राप्त हुआ।
  • सीनियर इस बात से खुश हैं कि उन्हें बॉयलरप्लेट कोड के टन नहीं लिखना है और सोच रहे हैं कि संचार को कैसे बेहतर बनाया जाए।
  • डिबगिंग को सरल बनाया गया था, और स्टोर की संरचना कंपनी के प्रत्येक डेवलपर के लिए सरल और समझ में आ गई।
  • परियोजनाओं या सिस्टम के विभिन्न हिस्सों के बीच संक्रमण सिरदर्द का कारण नहीं बनता है।
  • पीएम भी खुश हैं। बग की संख्या में कमी आई है - ग्राहक संतुष्ट हैं। लेखन आसान हो गया है - डेवलपर्स खुश हैं। खुशी के लिए पीएम को और क्या चाहिए?
  • आप धीरे-धीरे संचार पर जा सकते हैं या यहां तक ​​कि एक संकर दृष्टिकोण (संचार + स्लाइस) का उपयोग कर सकते हैं।

बेशक, लाइब्रेरी में भी कमियां हैं।

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

मुझे उम्मीद है, मौजूदा कमियों के बावजूद, हमारी लाइब्रेरी किसी के लिए उपयोगी होगी। यदि आपके पास उनके उपयोग पर सुधार या प्रश्न के लिए कोई सुझाव है, तो कृपया लिखें, मुझे चर्चा करने में खुशी होगी।
यदि कोई कूलर एनालॉग्स हैं जो हमें नहीं मिला - मुझे बताएं, हम निश्चित रूप से उनका अध्ययन करेंगे!

पुस्तकालय का पूरा विवरण यहां पाया जा सकता है , और यहां ऑनलाइन प्रहार किया जा सकता है

ReduxToolkit डॉक से संचार के लिए फिर से लिखे गए उदाहरण का पूरा कोड यहां है , लेकिन आप इसे यहां प्रहार कर सकते हैं

All Articles