בפוסט הקודם למדנו על useEffectועל useContext. בפוסט זה נעסוק בהוק נוסף, useReducer , נכיר את יכולותיו ולמה הוא משמש.
useReducer מחזיר מערך של 2 אלמנטים, בדומה ל-useState. הראשון הוא ה-State הנוכחי, והשני הוא dispatch(פונקציה).
למרות ש- useState הוא הוק בסיסי ו useReducer הוא לא, useState מיושם למעשה באמצעות useReducer. משמעות הדבר היא ש useReducer הוא פרימיטיב ואנחנו יכולים להשתמש ב-useReducer עבור כל מה שהיינו משתמשים עם useState.
אם אתם מכירים את Array.prototype.reduce אז למעשה useReducerמקבל את אותם ארגיומנטים ובעיקרון עובד אותו הדבר. אנחנו נעביר ל- useReducer פונקציית reducer(נראה דוגמא בהמשך) וערך התחלתי(initial state). פונקציית ה Reducer שלנו מקבלת את ה-State הנוכחי ופעולה(action) ותחזיר לנו את ה- state החדש.
מתי נשתמש ב useReducer
יש לנו שתי הוקס שבעזרתם אנחנו יכולים לנהל את ה state שלנו, וכמו תמיד שיש לנו שתי אפשרויות לעשות את אותה הפעולה תמיד נשאל את עצמינו מתי יהיה נכון להשתמש בכל אחת מהאופציות?
כאשר יש לנו לוגיקה מורכבת הכוללת State עם מספר תתי-ערכים (useReducer תעזור לנו גם לשפר את הביצועים) או כאשר ה-State הבא תלוי ב-State הקודם נעדיף בדרך כלל להשתמש ב- useReducer ולא ב-useState.
בדוגמא הבאה נראה איך אנחנו יכולים להשתמש ב- useReducerב על מנת ליצור Counter. יהיה לנו כפתור שמעלה ב-1 כל פעם. כפתור שמחסיר 1 וכפתור אתחול שיחזיר את ה counter לערך ההתחלתי( 0- שאותו אנחנו קבענו).
גם את הקפיצות של הקאונטר אנחנו יכולים לקבוע,בדוגמא שלנו הקאונטר יקפוץ באחד אך תוכלו להעתיק את הקוד לפרוייקט ולשחק עם זה ולשנות את ה- by בתוך ה- dispatch. מי שמכיר ויצא לו לעבוד עם Redux אז הקונספט נורא זהה ויהיה לו קל להתחבר להוק הזה.
הדבר השונה מ Redux שה – initalState לא חייב להיות אובייקט והוא יכול לקבל כל ערך.
אם אהבתם את המאמר אשמח אם תשתפו/תמליצו לאחרים, אם יש לכם שאלות או הערות תוכלו להשאיר אותם בתגובות מתחת.
6 תגובות
מאמר ברור ויפה!! תודה רבה
תודה רבה ברור מאוד
תודה רבה 🙂
תודה מאמר ברור מאוד.
תודהת בהיר מאוד!
האם זה במקום Redux או שזה נועד נטו לניהול state פנימי של קומפוננטה?
היי זה לא נועד להחליף את redux או את חבריו. זה בשביל סטייט ״פנימי״
זה אכן מזכיר את החשיבה של redux כנראה בגלל שדן אברמוב היה מעורב/כתב אתה שתיהם