لم تعد هناك حاجة إلى Redux Toolkit؟

إن مشكلة الكمية الهائلة من كود الصفيحة عند استخدام Redux معروفة للجميع ، الجميع يحلها بأفضل ما يمكن. وقد استخدمنا عكازات ودراجات مختلفة في مشاريع مختلفة ، دون أن نفقد الأمل في العثور على شيء موحد ومريح. قبل أكثر من عام بقليل ، شعرنا باليأس من بحثنا وتناولنا بجدية حل المشكلة. ما جاء منها موصوف أدناه.

قصة المظهر


تقوم شركتنا بتطوير مشاريع للشركات الناشئة حول العالم. وبالنسبة لهؤلاء الرجال المجانين الملهمين ، فإن الأهم (أو أحد هؤلاء) هو الوقت. دخلت السوق سابقا - فرص أكبر للبقاء. لذلك ، نحاول دائمًا تقليل وقت التطوير دون التضحية بالجودة ، وتقليل عدد الأخطاء التي يسببها العامل البشري. بالنسبة للجزء الأكبر ، نختار شيئًا قياسيًا وأكثر استقرارًا إلى حد ما. في هذه الحالة ، لم يتم العثور على أي شيء جاهز ، لذلك طوىوا أكمامهم وبدأوا في رؤية ما يمكن تدويره هنا.



كالعادة بدأنا بوصف المشكلة وحصلنا على ما يلي:

  • لكل مطور لهجته الدقيقة الخاصة عند كتابة الكود ، من الصعب تحقيق تطبيق مفهوم "الكود الذي لم يعد شخصية" ؛
  • الكثير من التعليمات البرمجية (boilerplate ، لصق النسخ وجميع المشاكل التي تلت ذلك) ، 100+ سطر على CRUD ؛
  • يقضي الكثير من الوقت في كتابة الأشياء الأساسية. ستنسى شيئًا ، والآخر: تعيين التحميل ، ومعالجة الأخطاء ، وما إلى ذلك ؛
  • يختلف هيكل المتجر من مشروع إلى آخر ، وأحيانًا بين أجزاء مختلفة من المشروع.

السؤال المطروح بشكل صحيح أو مشكلة مصاغة نصف الحل. بعد قليل من التفكير ، قدمنا ​​قواعد تكوين المتجر ، ووصفنا هيكله وقررنا إعادة بناء الرمز وتمشيطه. على الرغم من حقيقة أن قاعدة الكود الخاصة بنا لم تكن كبيرة بشكل لا يصدق ، فقد تعثرنا على الفور في كمية الكود التي يجب تغييرها.

بينما كان رؤساء الوزراء محيرون حول مكان الحصول على بضع ساعات أخرى من اليوم ، كان هناك زوجين من المتحمسين الذين قاموا بتوليد وتنفيذ فكرة بسيطة إلى حد التفاهة. نعم ، الأفكار المبتكرة ، بعد ظهورها ، تبدو دائمًا بسيطة. وكانت الفكرة هي: إنشاء أجزاء منفصلة من التعليمات البرمجية بدلاً من إعادة كتابتها يدويًا. لم أكن أرغب في استخدام المقتطفات والحصول على أوراق عند الخروج ، لأن أدت أي تغييرات إلى كارثة وإعادة بيع متكررة ، لذلك سرعان ما خرجت عن وظيفة أخذت بعض المعلمات كمدخلات ومبنية مخففة وعمل وقصة. لذلك ولدت النسخة الأولى من الاتصالات ( @ 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 ، أعيد كتابتها للتواصل. حاولت إجراء الحد الأدنى من التغييرات لتسهيل تتبع الاختلاف ، على الرغم من أن بنية المثال في حيرة من أمرها مشوشة للغاية. تركت على وجه التحديد تعليقات على الكود لتسهيل مقارنة كيف كان وكيف أصبح. انتبه إلى ملفات * .communication.ts والشرائح التي يستبدلونها.



حقيقة أن عدد الأسطر أصغر بكثير والشفرة نفسها تبدو أكثر متعة (ذاتية) ليست مهمة جدًا ، لأن في همز لدينا اتصالات ثقيلة جدا. هناك فرق آخر مهم. الكود تعريفي. نحن ببساطة نحدد ما وأين نريد أن نحصل عليه وماذا نفعل بالبيانات ، وكيفية القيام بذلك - نحن لا نهتم على الإطلاق.
الخلاصة - يجب استخدام redux-toolkit للتخصيص ، لكل شيء آخر هناك MasterCa ... @ axmit / redux-Communications .

كي تختصر


  • أصبحت الشفرة متسقة عبر جميع المشاريع ومع جميع المطورين. يتم حل المشكلات المماثلة بشكل موحد ، وغالبًا ما يتم تقديم الحلول في عبوات منفصلة وإعادة استخدامها في المستقبل. في الوقت نفسه ، انخفض مقدار الرمز بشكل ملحوظ.
  • تلقى يونيو تدفق واضح ومفهوم.
  • يبتهج كبار السن بأنهم ليسوا مضطرين لكتابة الكثير من التعليمات البرمجية ويتم التفكير في طريقة أخرى لتحسين الاتصالات.
  • تم تبسيط التصحيح ، وأصبح هيكل المتجر بسيطًا ومفهومًا لكل مطور في الشركة.
  • لا يسبب الانتقال بين المشاريع أو أجزاء مختلفة من النظام صداعًا.
  • رؤساء الوزراء سعداء أيضا. انخفض عدد الأخطاء - العملاء راضون. أصبحت الكتابة أسهل - المطورون سعداء. ماذا يحتاج رئيس الوزراء أيضا من أجل السعادة؟
  • يمكنك الانتقال إلى الاتصالات تدريجيًا أو حتى استخدام نهج هجين (اتصالات + شرائح).

بالطبع ، تحتوي المكتبة أيضًا على عيوب.

  • بدون رمز عينة وتوثيق ، من الصعب فهمه.
  • تغيير هيكل المخزن التعسفي لن ينجح ، لأنه تعتمد جميع الأتمتة على هيكل المتجر. ولكن تجدر الإشارة إلى أننا لم نواجه أي صعوبات في هذا العمل في عملنا.
  • يمكنك العمل فقط مع sagas. لم يكن Thunk يناسبنا ، ونحن نستخدم دائمًا sagas ، لذلك هذه ليست مشكلة بالنسبة لنا. ولكن إذا كانت الساجا لسبب ما لا تناسبك ، فلن تتمكن من استخدام المكتبة.

آمل ، على الرغم من أوجه القصور الحالية ، أن تكون مكتبتنا مفيدة لشخص ما. إذا كان لديك أي اقتراحات للتحسين أو أسئلة حول استخدامها ، يرجى الكتابة ، سأكون سعيدا للمناقشة.
إذا كان هناك أي نظائر أكثر برودة لم نتمكن من العثور عليها - أخبرني ، فسوف ندرسها بالتأكيد!

يمكن العثور على وصف كامل للمكتبة هنا ، وكزة عبر الإنترنت هنا .

الكود الكامل للمثال المعاد كتابته للتواصل من أرصفة ReduxToolkit موجود هنا ، ولكن يمكنك الضغط عليه هنا .

All Articles