ה-useReducer Hook היא אחת האפשרויות הטובות ביותר לניהול מדינה ב-React. התחל את המסע שלך עם ה-useReducer Hook באמצעות מדריך זה.

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

ה useReducer Hook מציעה מתודולוגיה מובנית לניהול מצבים ומעברים מורכבים. מחבקת את useReducer הוק פותח גמישות ויעילות, מה שמוביל לקוד נקי יותר.

הבנת השימוש ב-Reducer Hook

ה useReducer Hook הוא תכונה מובנית שמסופקת על ידי React המייעלת את ניהול המדינה על ידי הקפדה על עקרונות דפוס המפחית. הוא מציע לך אלטרנטיבה מאורגנת וניתנת להרחבה ל- useState וו, מתאים במיוחד לטיפול במצבים מורכבים.

על ידי מינוף ה useReducer הוק, אתה יכול לאחד גם את המצב וגם את המעברים שלו בתוך פונקציית מפחית אחת.

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

תחביר ודוגמה שימוש ב- useReducer Hook

instagram viewer

התחביר לשימוש ב- useReducer הוק הוא כדלקמן:

const [state, dispatch] = useReducer (reducer, initialState);

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

  • מפחית (פונקציה): קובע את הדרך שבה יש לעדכן את המצב בהתבסס על המצב הנוכחי והפעולה שנשלחה.
  • מצב ראשוני (כל שהוא): מייצג את ערך המצב ההתחלתי עבור הרכיב.

עם הפניה, ה useReducer Hook מחזיר מערך המורכב משני אלמנטים:

  • מדינה (כל שהוא): מציין את ערך המצב הנוכחי.
  • שיגור (פונקציה): פונקציה זו מאפשרת שליחת פעולות לעדכון המצב.

שקול את הדוגמה שלהלן הממחישה את השימוש ב- useReducer התחבר לניהול מונה פשוט:

יְבוּא הגיבו, { useReducer } מ'לְהָגִיב';
const initialState = 0;
const מפחית = (מדינה, פעולה) => {
החלף (סוג פעולה) {
מקרה'תוֹסֶפֶת':
לַחֲזוֹר מצב + 1;
מקרה'ירידה':
לַחֲזוֹר מדינה - 1;
בְּרִירַת מֶחדָל:
לַחֲזוֹר מדינה;
 }
};


const מונה = () => {
const [count, dispatch] = useReducer (reducer, initialState);
const handleIncrement = () => {
 לְשַׁגֵר({ סוּג: 'תוֹסֶפֶת' });
 };


const handleDecrement = () => {
 לְשַׁגֵר({ סוּג: 'ירידה' });
 };


לַחֲזוֹר (






};

מהאיור לעיל, מצב ראשוני של 0 מוגדרת לצד פונקציית מפחית האחראית לטיפול בשני סוגי פעולות: תוֹסֶפֶת ו ירידה. פונקציית המפחית משנה את המצב בהתאם לפעולות שצוינו.

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

בניית פונקציית מפחית

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

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

שקול את הדוגמה שלהלן של פונקציית מפחית המשמשת לניהול רשימת מטלות:

const initialState = [];
const מפחית = (מדינה, פעולה) => {
החלף (סוג פעולה) {
מקרה'לְהוֹסִיף':
לַחֲזוֹר [...state, action.payload];
מקרה'לְמַתֵג':
לַחֲזוֹר state.map((לעשות) =>
 todo.id action.payload? { ...לעשות, הושלם: !todo.completed }: todo
 );
מקרה'לִמְחוֹק':
לַחֲזוֹר state.filter((לעשות) => todo.id !== action.payload);
בְּרִירַת מֶחדָל:
לַחֲזוֹר מדינה;
 }
};

במקרה שלעיל, פונקציית המפחית מטפלת בשלושה סוגי פעולה שונים: לְהוֹסִיף, לְמַתֵג, ו לִמְחוֹק. עם קבלת ה לְהוֹסִיף פעולה, הוא מוסיף את המטען (פריט מטלות חדש) ל- מדינה מַעֲרָך.

במקרה של ה לְמַתֵג פעולה, זה מחליף את הושלם מאפיין של פריט המשימות המשויך למזהה שצוין. ה לִמְחוֹק פעולה, לעומת זאת, מבטלת את פריט המשימות המקושר למזהה המסופק ממערך המדינה.

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

פעולות שיגור

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

האחריות לטיפול בפעולות אלו ויצירת המצב הבא מוטלת על פונקציית המפחית.

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

בדוגמאות הקודמות, פעולות נשלחו באמצעות התחביר dispatch({type: 'actionType'}). עם זאת, ניתן להעלות על הדעת שפעולות יכללו נתונים משלימים, הידועים בשם מטען, המספק תובנות נוספות הנוגעות לעדכון. לדוגמה:

לְשַׁגֵר({ סוּג: 'לְהוֹסִיף', מטען: { תְעוּדַת זֶהוּת: 1, טֶקסט: 'לסיים שיעורי בית', הושלם: שֶׁקֶר } });

בתרחיש זה, ה לְהוֹסִיף הפעולה כוללת אובייקט מטען הכולל את הפרטים של פריט המטלות החדש שישולב במדינה.

ניהול מצב מורכב עם useReducer

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

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

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

פונקציית המפחית יכולה לטפל בצורה מיומנת בפעולות הרלוונטיות לשינוי של שדות ספציפיים ולאימות מקיף של הטופס כולו.

const initialState = {
 שֵׁם: '',
 אימייל: '',
 סיסמה: '',
 isFormValid: שֶׁקֶר,
};
const מפחית = (מדינה, פעולה) => {
החלף (סוג פעולה) {
מקרה'עדכון שדה':
לַחֲזוֹר { ...state, [action.payload.field]: action.payload.value };
מקרה'validateForm':
לַחֲזוֹר { ...מדינה, isFormValid: action.payload };
בְּרִירַת מֶחדָל:
לַחֲזוֹר מדינה;
 }
};

בדוגמה, פונקציית המפחית מתאימה לשני סוגי פעולה נפרדים: updateField ו validateForm. ה updateField פעולה מקלה על השינוי של שדה ספציפי בתוך המדינה על ידי ניצול הערך שסופק.

לעומת זאת, ה validateForm פעולה מעדכנת את isFormValid מאפיין מבוסס על תוצאת האימות שסופקה.

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

השוואת useReducer עם פתרונות ניהול מדינה אחרים

למרות ש useReducer הוק עומד ככלי רב עוצמה לניהול מדינה, חיוני להכיר בשוני ובפשרות שלו בהשוואה לפתרונות ניהול מדינה חלופיים בתוך מערכת האקולוגית של React.

useState

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

Redux

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

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

API של הקשר

ה-Context API של React מאפשר שיתוף של מצב על פני מספר רכיבים מבלי להזדקק לקידוח משענת. בשיתוף עם useReducer, זה יכול להניב פתרון ניהול מדינה מרכזי.

בעוד השילוב של Context API ו useReducer מתגאה בעוצמה ניכרת, היא עשויה להכניס מורכבות נוספת כאשר היא עומדת לצד השימוש ב-useReducer בבידוד.

ה-Context API עדיף להשתמש כאשר יש צורך לשתף מצב בין רכיבים מקוננים עמוקים או כאשר מתמודדים עם היררכיית רכיבים מורכבת. בחירת פתרון ניהול מדינה מתאים תלויה בדרישות הספציפיות של האפליקציה הנידונה.

עבור פרויקטים בגודל בינוני, useReducer יכול להתגלות כחלופה יעילה ופשוטה יותר ל-Redux או ל-Context API.

משחרר את הפשטות של ניהול המדינה

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

כאשר הוא מועסק במקביל ל-useState Hook, useReducer יכול לשמש כחלופה קלת משקל עבור ספריות כמו Redux או Context API, במיוחד בהקשר של גודל קטן עד בינוני פרויקטים.