ספריית Redux של דן אברמוב היא הדבר החם היום בעולם של React. כותב הספריה גויס לאחרונה לעבוד בפייסבוק ויש סיכוי לא רע שנתחיל בקרוב לראות את הגב של פייסבוק גם לספריה זו (בנוסף למימוש Flux שלהם). הנה הצעה שלי למסלול לימוד רדוקס שיעזור להבין על מה כולם מדברים.

1. התחלה: למה זה טוב

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

2. נמשיך לקצת תחביר

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

3. השלב הבא: Immutable.JS

זה לא שחייבים להכיר את Immutable.js בשביל לעבוד ברדוקס אבל ההיכרות והעבודה עם ספריה זו הופכים את כל העסק להרבה יותר פשוט. במילה- כדי להגיע לביצועים טובים וכדי לאפשר את כל הפינוקים שדן אברמוב דיבר עליהם בהרצאת הפתיחה רדוקס מעודדת עבודה עם מבני נתונים שאינם משתנים (Immutable). ב JavaScript אין תמיכה מובנית במבני נתונים כאלה ולכן רובנו משתמשים בספריה Immutable כדי לקבל מימוש יעיל של מבנים אלו.

כדאי להתחיל מקריאת התיעוד בעמוד הבית של הפרויקט:
https://facebook.github.io/immutable-js/

אפשר למצוא דוגמאות נוספות בפוסט הזה:
http://www.zsoltnagy.eu/introduction-to-immutable-js/

ואת עמוד התיעוד המלא בקישור:
https://facebook.github.io/immutable-js/docs/#/

אם כתבתם את משחק האיקס עיגול בחלק הקודם, מוזמנים כעת להמיר את המשחק שישתמש במבני נתונים מהספריה Immutable JS.

4. עכשיו אפשר להתחיל לדבר על רדוקס לעומק

בעמוד הבית של הפרויקט תמצאו מדריך מקיף לרדוקס. יש שם המון עומק וכדאי לקרוא אותו מספר פעמים, בדגש על הפרק על Middleware. במהלך הקריאה נסו לראות אם המשחק שכתבתם מתאים למה שאתם קוראים או שהחמצתם חלק מהרעיונות וצריך לשכתב:
http://redux.js.org/index.html

החיבור לממשק המשתמש גם מוסבר לעומק במדריך בפרק Usage With React:
http://redux.js.org/docs/basics/UsageWithReact.html

אחרי הקריאה מוזמנים גם לבחון את הספריה react-redux המיישמת את הרעיונות שמוסברים במדריך:
https://github.com/rackt/react-redux

ולסיום הוסיפו ממשק משתמש למשחק איקס עיגול שכתבנו.

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