UseReducer

0
870

בפוסט הקודם למדנו על 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 לא חייב להיות אובייקט והוא יכול לקבל כל ערך.

אם אהבתם את המאמר אשמח אם תשתפו/תמליצו לאחרים, אם יש לכם שאלות או הערות תוכלו להשאיר אותם בתגובות מתחת.

LEAVE A REPLY

Please enter your comment!
Please enter your name here