יצירת Store ב-Redux

בלי כתוביותעם כתוביות

מילון מושגים:

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

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

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

יצירת Store ב-Redux

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

השלבים

1. קובץ נפרד: מוסיפים בתיקיית redux קובץ store.ts, נפרד מקבצי ה-state.

2. combineReducers: קוראים לפונקציה combineReducers של Redux ומעבירים לה אובייקט עם כל ה-reducers: reducer של מוצרים ושל עובדים. היא מאחדת אותם לאובייקט אחד. אם יש עוד, מוסיפים אותם לאובייקט הזה.

3. createStore: מעבירים את האובייקט המאוחד ל-createStore, ומייצאים את ה-Store כ-export default.

4. מה מקבלים: ל-Store יש פעולות כמו dispatch, getState ו-subscribe.

למה משנים שמות

5. הבלבול: ב-getState מתקבל אובייקט עם המפתחות productsReducer ו-employeesReducer. אבל reducer היא פונקציה, והערך בתוכה הוא state, כך שהשם מטעה.

6. התיקון: ביצירת האובייקט נותנים את השמות productsState: productsReducer ו-employeesState: employeesReducer. אז store.getState() מחזיר productsState ו-employeesState, ובתוך productsState נמצאים המוצרים.

שימו לב

מדובר בהרבה כתיבה בשביל תשתית, וזה אחד החסרונות של Redux. אבל אחרי שהיא מוכנה קל להשתמש ב-state בכל האפליקציה.

אחרי ההרצאה התשתית של Redux מוכנה: state, סוגי פעולות, reducer ו-Store.

השיעור הבא בקורס: רידקס - Dispatching Data to the Store

פרקי ההרצאה: יצירת Store ב-Redux

תמלול ההרצאה: יצירת Store ב-Redux

הטקסט המלא של הדקות הראשונות בהרצאה «יצירת Store ב-Redux» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

00:02
הגענו לדבר האחרון בבנייה של התשתית, שימו לב כמה כתיבה יש לנו כאן ברידאקס רק בשביל לבנות את התשתית בכדי שיהיה לנו קל ונוח להשתמש אחר כך ברחבי האפליקציה בסטייט הזה ובספרייה של רידאקס.
00:20
ובעצם אחד החסרונות של רידאקס הכתיבה הזאת שיש בשביל לבנות את התשתית אבל זה בעצם רידאקס זאת הספרייה אנחנו רוצים לבנות את ה-Store זה משהו שהוא נפרד לסטייטים.
00:34
אני סוגר את הסטייטים ואני הולך לספרייה עצמה של רידאקס ומוסיף פה Store TS. זה בעצם הקובץ שיכיל את אובייקט ה-Store.
00:46
הדבר הראשון שאנחנו צריכים לבצע זה לקרוא לפונקציה שנקראת Combine Reducers. הפונקציה הזאת שייכת לספרייה של רידאקס. הנה הפונקציה, נמצאת כאן, ומה שאנחנו צריכים לעשות זה לקרוא לה ולהעביר לה אובייקט משלנו האובייקט הזה מכיל רשימה של כל הרדיוסרים שקיימים.
01:08
יש לנו רדיוסר אחד שנקרא product reducer בואו נראה אם הוא מגלה לנו אותו no suggestions למה אתה לא מוצא לי אותו הרי כתבתי אותו פה הנה הוא למה אתה לא מוצא לי אותו בוא נראה הנה הוא מצא ואובייקט נוסף נקרא EmployeesReducer, תגלה לי אותו גם כן,
01:37
הנה הוא כאן. ואנחנו צריכים לקבל אובייקט ConstReducers. אלו כל הרדיוסרים שקיימים. יש לי רק שניים, אם היו לי יותר אז הייתי שם פה את כל רשימת הרדיוסרים לפונקציה אחת ששייכת לתשתית שעושה קומביין לכולם ומחזירה לי אובייקט אחד ויחיד להתחיל את כל ה-Reducers האלה.
02:01
יש פה משהו שאנחנו הולכים לשנות, משהו מבחינת ה-Naming, אבל תכף תבינו למה. עכשיו, מה אנחנו עושים עם האובייקט הזה? עכשיו אנחנו יוצרים את אובייקט ה-Store, שאותו אנחנו רוצים בכל האפליקציה, ואנחנו יוצרים אותו על ידי פונקציה שנקראת CreateStore.
02:22
פונקציית CreateStore גם היא שייכת לספרייה של הרידאקס, הנה אנחנו רואים אותה כאן, והיא מקבלת את אובייקט ה-Reducers, שיצרנו שנייה לפני זה, זאת אומרת קודם כל אנחנו עושים קומביין לכל הרדיוסרים לאובייקט אחד ואז שולחים אותו לסטור ואת אובייקט הסטור אנחנו מחצינים החוצה אקספורט על ידי דיפולט כי זה הדבר היחידי שיש לנו.
02:48
בגדול זה הכל אבל אנחנו בהמשך בקבצים אחרים כמובן הולכים להשתמש בסטור. איך אנחנו משתמשים בסטור? יש לנו כאן את הפעולות שדיברנו שאנחנו רוצים לבצע.
03:03
הנה ה-Dispatch, הנה ה-Get State, הנה ה-Subscribe ועוד. אז כאשר לדוגמה אנחנו הולכים ל-Get State