استرجاع - مراجعة منطق المخفض والإجراءات

في أحد هذه الأيام كنت أعمل مع الكثير من ملفات redux'a ، حيث يتم نقل الملفات منطقياً إلى المخفضات والإجراءات واكتب ثوابت الإجراءات. كل هذا تبين أنه مهمة صعبة إلى حد ما ، حيث احتفظت بكل هذه الأنواع من الملفات في رأسك وتتبع المنطق. و ... يوريكا ، جاءت الفكرة لتبسيط كتابة منطق الإعادة. ربما صنع دراجتك ، لكن من لم يحاول كتابة دراجاتهم؟ ولكن الشيء الرئيسي هو عدم الكتابة ، ولكن كتابة الدعم عندما . اسمحوا لي أن أحاول أن أريكم رؤيتي لمنطق إعادة التكرار الخاص بي قليلاً.

ابدأ

وبالتالي لدينا تقليل:

//   import { TODO } from './actions/const'; ..... //      .... //    reducer function todoApp(state = initialState, action) { switch (action.type) { case TODO.SET_VISIBILITY_FILTER: return Object.assign({}, state, { visibilityFilter: action.filter }) case TODO.ADD_TODO: return Object.assign({}, state, { todos: [ ...state.todos, { text: action.text, completed: false } ] }) case TODO.TOGGLE_TODO: return Object.assign({}, state, { todos: state.todos.map((todo, index) => { if (index === action.index) { return Object.assign({}, todo, { completed: !todo.completed }) } return todo }) }) ...          ...            ... default: return state } } 

مأخوذة من الاحواض على الإعادة .

العمل يبدو مثل:

 //   import { TODO } from './const'; export const addTodo = (value) => ({ type: TODO.ADD_TODO, payload: value }) 

الثوابت أعتقد أنه ليست هناك حاجة لإظهار.

BOOL

سأحاول وصف الهيجان الذي أواجهه عند قراءة الكود ، خاصة عند تصحيح الأخطاء أو توسيع الوظيفة.

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

دخول المنطق

ربما يبدو الأمر غريباً ومدهشاً في البداية ، لكن يبدو لي أن هذا هو المكان المناسب لك. سأحاول نقل القالب الخاص بي.

المخفض

تجسس على جوجل

العتاد - آلية تغير عزم الدوران والطاقة. هذه واحدة أو أكثر من التروس تتفاعل مع بعضها وتقلل من عدد دورات المحرك إلى سرعة دوران مقبولة للعقدة المنفذة.

أي أن العمود الموجود عليه يحتوي على ترس ، هذا الترس ينقل الدوران إلى ترس آخر ، والذي بدوره يدور إلى عموده نزيل العمود ويتم إزالة الترس به. ليس وحدة متقطعة ، إذا جاز التعبير.

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

العمل

كما ذكرنا أعلاه ، هذا هو الإجراء نفسه ، ومنطق الطاقة التي يجب نقلها (في حالتنا ، البيانات).

وهكذا دعنا نذهب. دراجتي

المخفض:

 export function todoApp(state = initialState, action) { if (typeof action.func === 'function') { return action.func(state); } } 

نعم هذا هو كل ما عندي المخفض. الآن ربما سيكون هناك فجوة صغيرة في الأنماط ، كيف؟ اخذنا المنطق من المخفض ..؟ نعم أقول لك ، لقد أخذنا المنطق من المخفض !!!

دعنا نلقي نظرة على العمل:

 export function addTodo = (value) => ({ type: 'ADD_TODO' , payload: value, func: (state) =>({...state, value}) }) } 

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

من الجدير بالذكر أننا أزلنا الثوابت. نعم والتبديل أيضا. مما سمح للحد من تعقيد تنفيذ O (1) في المخفض.

هذا مجرد مثال رسم يمكنك توسيع وإزالة combineReducers. تعد عملية توسيع احتياجاتك وتكميلها وتغييرها أمرًا رائعًا للغاية ، حيث تأخذ أداة وتجعلها مثالية لمهامك.

والأهم من ذلك أريد أن أقول.

كن ذكيا. نحلة