מודלים שונים לניהול ריאקטיביות באפליקציה

ספריות שונות מנהלות את הדרך שבהן הן נצמדות לשינויים באפליקציה.
היכולת לנהל state משפיעה לא רק על הדרך שבה מנהלים את השינוי של יחידה לוגית כלשהי על המסך, אלא לעתים קרובות גם על מספר רב את יחידות שונות שיש ביניהן קשר, בהתאם לשינוי ה-state של האפליקציה.
לצורך כך, הניהול של אותו state צריך להיות אפקטיבי, לעזור לנו לפתח גם טוב וגם מהר.
אנחנו נרצה שה-state גם יהיה יעיל מבחינת ביצועים, וגם קל לניהול, שדרוג ופיתוח עתידי, וכן לאפשר לצוות של מפתחים שונות להבין את הקוד אחד של השני ובכך להמשיך את תהליך הפיתוח לטווח ארוך.

דוגמאות לניהול ריאקטיביות

בואו ניגש לעניין, הנה 2 דוגמאות שונות:

מה הקטע של ״אובייקטים ריאקטיביים״?

אם נתייחס למבנה של הגרסה עם ה-getters, נשים לב לכמה דברים בולטים:

1. אין יצירה של אובייקט חדש בכל פעם שמשנים את הערכים.
2. ההרשמה לשינויים על האובייקט בעצם תלויים על הערכים ב-getters.

נציין כי ב-vue3 נעשה שימוש ביכולות של Proxy כדי לממש את אותה ריאקטיביות, אך זה לא רלוונטי לפוסט הזה.
עצם זה שאנחנו לא מייצרים אובייקט חדש בכל פעם, אז בעצם לא ניתן לבצע השוואת אובייקטים, אך עם זאת - זה שלא מייצרים אובייקט חדש בכל שינוי של משתנה, בעצם אומר שהשינוי הוא בהכרח מהיר יותר ויעיל יותר.
כמו כן, גם ההיצמדות לשינויים נעשית כאן ברמת השינוי על המשתנים עצמם ולא על ״ACTIONS״ (בדומה לריאקט/רידאקס). עם זאת - רצוי להזכיר שיש הפרדה בין ה-getters עצמם לבין ה-state עצמו בפועל, כך שה-getters עצמם לא חייבים להיות מקבילים וזהים לערכים עצמם ב-state.
עוד יתרון משמעותי - היות וההצמדות היא לערכים ספציפיים ב-state, אז כאשר מתבצע שינוי - רק ה-callbacks הרלוונטיים לאותם ערכים מקבלים את העדכון הספציפי על הפרמטרים שאליהם הם נרשמו.

מה העניין עם ניהול סטייט ברידקס?

משום מה, השיט הזה הוא הדרך הנפוצה ביותר לנהל סטייט בתעשיה.
נסתכל כרגע לעומק על המימוש בפועל:

1. כל קריאה ל-action מפעילה את כל ה-reducers.
2. כל שינוי של כל משתנה, בהכרח יחליף וייצור אובייקטים שאין לו בהכרח צורך להחליף וליצור חדשים (לפחות אחד).
3. גם watchers מריצים את כל ה-watchers כדי לבצע side effects (לפחות קורה במקבילה של רידקס באנגולר - ngrx).

סה״כ נשמע שזה פח אשפה רציני. אז איפה היתרונות?

1. הפרדה בין שינוי משתנה לבין הפעולה שנעשתה על מנת לשנות את המשתנה, ובכך להיצמד לפעולות במקום לערכים (ב-Vue הפתרון המקביל לסוגיה הזאת נפתרה באמצעות Vuex).
2. סדר ברור של הפעולות הנעשות באתר, ושל התהליכים בהן עוברות.
3. היכולת לשחזר תהליך שינויים ב-state באמצעות סדרת פעולות.

תגידו מה שתגידו, אני מעדיף את המבנה של Vue. הן מבחינת יעילות והן מבחינת נוחות.
אישית, אני לא אוהב את כל כללי הטקס שצריך לעשות כדי לשנות ערך של property על אובייקט, ובייחוד כשצריך לבצע פעולות אסינכרוניות.

מוזמנים להגיב מה דעתכם. :)