4.6 KiB
| title | localeTitle |
|---|---|
| Redux | مسترجع |
مسترجع
Redux هو حاوية حالة يمكن التنبؤ بها لتطبيقات JavaScript.
يساعدك على كتابة التطبيقات التي تتصرف باستمرار ، وتشغيل في بيئات مختلفة (العميل والخادم ، والأصلي) ، وسهلة لاختبار. علاوة على ذلك ، فإنه يوفر تجربة رائعة للمطورين ، مثل تحرير التعليمة البرمجية المباشرة مع مصحح أخطاء وقت السفر.
المبادئ الأساسية لـ Redux:
- Redux هي حاوية حكومية ، حيث تقوم بتخزين كل الولاية في مكان واحد
- تتم قراءة الولاية فقط ، والطريقة الوحيدة لتغيير الدولة هي إرسال عمل.
- لا يمكن تغيير الحالة إلا من خلال وظائف نقية أو في مصطلح آخر: مخفضات. يأخذ Redux Reducers في الحالة السابقة وكائن التصرف ويعيد الحالة التالية.
من الناحية العملية ، كيف نستخدم Redux بالضبط؟
المادة 1
أين يتم تخزين هذه الحالة؟ Redux يوفر لك وظيفة يدوية تسمى
createStore()
حيث يمكنك إنشاء المتجر الذي سيحافظ على كل حالتك.
القاعدة 3 (سأقوم بعرض القاعدة 3 أولاً لأنها ستجعلها أكثر منطقية)
لا يمكن تغيير الحالة إلا من خلال وظيفة نقية تعرف بالمخفّض حتى نتمكن من إنشاء هذا الاتصال سنمرر في المخفض إلى CreateStore () مثل
var store = createStore(reducer)
يصبح الأمر أكثر تعقيدا عندما يكون لديك مخفضات أكثر ولكن في الصميم ، يحتوي المخزن الآن على مخفض متصل به
القاعدة 2
بمجرد أن يكون لدينا متجر يتم إنشاؤه باستخدام store = createStore (المخفض). يحتوي المتجر الجديد الذي أنشأناه على طريقة تسمى الإرسال. تذكر في القاعدة 2 الطريقة الوحيدة التي يمكننا بها تغيير الدولة هي إرسال عمل!
تستطيع أن ترى أين يحدث هذا.
store.dispatch(action)
قبل أن أتناول ما هو المخفض والعمل الذي أقوم به ، أعتقد أن عرض تطبيق أساسي ومحدود للغاية لـ CreateStore () من Redux سوف يساعد بشكل كبير.
createStore = (reducer) => { let state; //dispatch method dispatch = (action) => { state = reducer(state, action) } return {dispatch} }
انظر كيف نمرر في المخفض إلى createStore ويصبح مضبوطًا في طريقة إرسالنا ؛ وعندما نطلق على طريقة الإرسال فإنه يأخذ في عمل ويضع حالة جديدة على أساس ما سوف يعود المخفض.
ما هو المخفض؟ ما هو العمل؟
الإجراء في المستوى الأساسي هو كائن له خاصية تسمى النوع. يمكن أن يكون لها أيضًا خصائص أخرى ، ولكن ببساطة ستتمتع بالنوع.
var someAction = {type:'doSomething'}
المخفض هو مجرد وظيفة:
`var reducer = (state, action) => {
if (action.type === 'doSomething'){
return changedState;
} else if ( action.type === 'doSomethingElse'){
return changedState;
} else {
return state
}
} `
الإجراء الذي نمرره إلى المخفض سيحدد كيفية تغيير الحالة اعتمادًا على النوع. يصبح Redux أكثر تعقيدًا ، ولكن إذا فهمت هذه المبادئ ، فسيكون لديك وقتًا أسهل في التنقل من خلال مشاريع رد الفعل المتفاعلة!
معلومات اكثر:
هل حقا بحاجة إلى Redux؟
كتب دان أبراموف ، مبتكر Redux ، منذ بعض الوقت مقالة رائعة قد لا تحتاج إلى Redux . يجب عليك التحقق من ذلك أولاً ، لأنك قد لا تحتاج إليه.
لمزيد من المعلومات ، توجه إلى http://redux.js.org/