93 lines
4.6 KiB
Markdown
93 lines
4.6 KiB
Markdown
|
---
|
||
|
|
title: Redux
|
||
|
|
localeTitle: مسترجع
|
||
|
|
---
|
||
|
|
## مسترجع
|
||
|
|
|
||
|
|
Redux هو حاوية حالة يمكن التنبؤ بها لتطبيقات JavaScript.
|
||
|
|
|
||
|
|
يساعدك على كتابة التطبيقات التي تتصرف باستمرار ، وتشغيل في بيئات مختلفة (العميل والخادم ، والأصلي) ، وسهلة لاختبار. علاوة على ذلك ، فإنه يوفر تجربة رائعة للمطورين ، مثل تحرير التعليمة البرمجية المباشرة مع مصحح أخطاء وقت السفر.
|
||
|
|
|
||
|
|
المبادئ الأساسية لـ Redux:
|
||
|
|
|
||
|
|
1. Redux هي حاوية حكومية ، حيث تقوم بتخزين كل الولاية في مكان واحد
|
||
|
|
2. تتم قراءة الولاية فقط ، والطريقة الوحيدة لتغيير الدولة هي إرسال عمل.
|
||
|
|
3. لا يمكن تغيير الحالة إلا من خلال وظائف نقية أو في مصطلح آخر: مخفضات. يأخذ 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؟
|
||
|
|
|
||
|
|
[كتب دان أبراموف](https://github.com/gaearon) ، مبتكر Redux ، منذ بعض الوقت مقالة رائعة [قد لا تحتاج إلى Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367) . يجب عليك التحقق من ذلك أولاً ، لأنك قد لا تحتاج إليه.
|
||
|
|
|
||
|
|
لمزيد من المعلومات ، توجه إلى [http://redux.js.org/](http://redux.js.org/)
|
||
|
|
|
||
|
|
### مصادر
|
||
|
|
|
||
|
|
* [دورة من دان أبراموف ، مؤلف Redux.](https://egghead.io/courses/getting-started-with-redux)
|