إدارة الحالة (State Management) في أنجلر بدون وجع دماغ RxJS: دليل استخدام Angular Signals
لو كنت مبرمج Angular بقالك فترة، أكيد عارف إن التعامل مع الـ Observables والـ Subjects في RxJS عشان تعمل State Management كان بيخلي الكود معقد جداً. ساعات بنلاقي نفسنا غرقانين في الـ operators زي switchMap و combineLatest عشان بس نغير قيمة في متغير ونسمعه في الـ UI. النهاردة هنتكلم عن الثورة الحقيقية اللي أنجلر قدمتها، وهي الـ Angular Signals، اللي خلتنا نقدر نبني أنظمة متكاملة ببساطة ومن غير ما نحتاج نكتب أكواد معقدة.
Table of contents [Show]
يعني إيه أصلاً Angular Signals؟
الـ Signals هي الطريقة الجديدة والفعالة عشان تعمل تتبع (Tracking) لتغيير البيانات في التطبيق بتاعك. الفكرة ببساطة إن الـ Signal هي عبارة عن "غلاف" (Wrapper) لقيمة معينة، وأنجلر بمجرد ما القيمة دي تتغير، بيفهم لوحده إيه الـ Components اللي محتاجة تعمل تحديث (Re-render). ده بيشيل من على كتافك عبء الـ Zone.js وبيخلي الأداء أسرع بكتير (Fine-grained reactivity).
إدارة الحالة (State Management) بدون RxJS
زمان كنا بنستخدم BehaviorSubject عشان نحفظ الحالة، ونعمل async pipe عشان نعرضها. دلوقتي، الموضوع أبسط بكتير. تعال نشوف إزاي نعمل State بسيطة بـ Writable Signal:
// تعريف الحالة
const user = signal({ name: 'Ahmed', role: 'Developer' });
// تحديث الحالة
user.update(current => ({ ...current, role: 'Senior Developer' }));
// قراءة الحالة في الـ Component
{{ user().name }}
المزامنة بين الـ Components باستخدام Signals
عشان نربط بين الـ Components المختلفة من غير RxJS، بنستخدم الـ Computed Signals. دي بتخلينا نعمل حالة معتمدة على حالة تانية، وأنجلر بيحدثها تلقائياً لما القيمة الأساسية تتغير.
const firstName = signal('Ahmed');
const lastName = signal('Ali');
// الـ Computed بتحدث نفسها لما أي واحدة من اللي فوق تتغير
const fullName = computed(() => `${firstName()} ${lastName()}`);
إمتى تستغنى فعلاً عن RxJS؟
سؤال مهم جداً. هل RxJS ماتت؟ الإجابة لأ. RxJS لسه قوية جداً في التعامل مع الـ Streams والـ API Calls زي الـ HTTP Requests. لكن في الـ Local State Management، الـ Signals هي الملك. تقدر تستخدم toSignal عشان تحول أي Observable لـ Signal، وده بيدينا أفضل ما في العالمين: قوة الـ RxJS في الـ Data Fetching، وسهولة الـ Signals في الـ UI Binding.
نصيحة من أخ لمبرمج
يا صاحبي، التكنولوجيا بتطور بسرعة، والأنظمة الجديدة زي Signals بتهدف لتسهيل حياتك، مش لزيادة تعقيدها. ما تحاولش تنقل كل حاجة لـ Signals فوراً لو عندك مشروع قديم، ابدأ بالـ Components الجديدة، جرب تعتمد على الـ Signals في الـ State، وشوف الفرق في نظافة الكود (Code Cleanliness). المبرمج الشاطر هو اللي بيعرف يستخدم "الأداة الصح للمهمة الصح". اتعلم الأساسيات كويس، وجرب بأيدك، لأن ده اللي هيفرق معاك في الـ Career بتاعك.
