מדריך ריאקט – react hooks | useReducer

useReducer הינו HOOK שמנהל מידע של הקומפוננטה, בדומה לuseState. קודם כל useReducer מגיע מתוך הרעיון של reduce בjavascipt.

אז מה ההבדל useReducer ו לuseState

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

נציג דוגמה הפשוטה של שימוש ב useReducer ואסביר בהמשך:

import React, {useReducer} from 'react'


const ACTIONS = {
    INCREMENT : 'increment',
    DECREMENT : 'decrement'
}
function reducer(state : any, action : any) : any{
    switch (action.type) {
        case ACTIONS.INCREMENT : 
        return  {count: state.count + 1}
        
        case ACTIONS.DECREMENT : 
        return  {count: state.count - 1}
           
        default: 
        return  state;
        
    }
  }


 function AddMoreCrocs() {
    const [state, dispatch] = useReducer(reducer, {count: 0});
    
    function increment() {
        dispatch({type: ACTIONS.INCREMENT})
    }
    function decrement() {
        dispatch({type: ACTIONS.DECREMENT})
    }
    return (
        <div>
            <button onClick={increment} >increment</button>
            <button onClick={decrement} >decrement</button>

            <span>{state.count}</span>
        </div>
    )
}

export default AddMoreCrocs;

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

1. פונקציה חיצונית שתחזיר את ה state החדש
2. ערך ראשוני. (initialState)

על מנת לשנות את ערכי ה state יהיה עלינו להשתמש בdispatch שהינה פונקציה, שמקבל ערך וכן מריצה את הפונקציה שבנינו ומשנה את ה state ומחזירה אותו.

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

מי שמכיר redux מכיר הייטב את התצורות הללו לניהול מידע של state.

מתי נכון להשתמש ב useReducer ?

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

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

לסיכום useReducer

כלי מאד עוצמתי לניהול מידע של קומפוננטה, פשוט ליישום . בפוסט הבא אדבר על שני הוקים: useCallback ו useMemo

פוסטים קשורים:

מדריך ריאקט – react hooks | useState מדריך ריאקט – react hooks | useEffect מדריך ריאקט – react hooks | useContext מדריך ריאקט – classes, functional component & hooks