ההוק useReducer ב-React: תחביר, דוגמאות, מול useState

useReducer הוא הוק של React ששומר state כמו useState, אבל מעביר כל דרך לשנות אותו לפונקציה אחת, ה-reducer. הקומפוננטה קוראת ל-dispatch עם אובייקט action כמו { type: 'increment' }, ו-React מעבירה את ה-state הנוכחי ואת ה-action הזה ל-reducer, שמחזיר את ה-state הבא.

import { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        case 'reset':
            return { count: 0 };
        default:
            throw new Error('Unknown action: ' + action.type);
    }
}

export default function App() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p style={{ fontSize: 24 }}>{state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>+1</button>{' '}
            <button onClick={() => dispatch({ type: 'decrement' })}>-1</button>{' '}
            <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
        </div>
    );
}

הכפתורים לא אומרים איך הספירה משתנה, רק מה קרה. כל החשבון נמצא ב-reducer. הוסיפו case 'double' שמחזיר { count: state.count * 2 } וכפתור ששולח אותו, כדי לראות איך סוג עדכון חדש משתלב.

התחביר

const [state, dispatch] = useReducer(reducer, initialArg, init); // init is optional

function reducer(state, action) {
    // return the next state
}

• reducer היא פונקציה (state, action) => nextState. הגדירו אותה מחוץ לקומפוננטה; היא לא צריכה שום דבר מה-scope של הקומפוננטה.
• initialArg הוא ה-state ההתחלתי, שמשמש רק ברינדור הראשון.
• init אופציונלי. אם מעבירים אותו, ה-state ההתחלתי הוא init(initialArg) במקום.
• state הוא ה-state הנוכחי ברינדור הזה.
• dispatch(action) שולח action ל-reducer ומתזמן רינדור עם התוצאה. הוא יציב: זו אותה פונקציה בכל רינדור, ולכן בטוח להעביר אותו מטה או לרשום אותו כתלות.

action יכול להיות כל ערך, אבל לפי המוסכמה זה אובייקט עם מחרוזת type שמתארת מה קרה, ועוד כל נתון שה-reducer צריך: { type: 'added', text: 'Buy milk' }.

כתיבת reducer

רוב ה-reducers הם switch על action.type, עם case אחד לכל סוג אירוע. כל case מחזיר state חדש לגמרי; הוא אף פעם לא משנה את הישן. ה-case של default זורק שגיאה, כך שטעות הקלדה כמו dispatch({ type: 'incremnet' }) נכשלת ברעש במקום לא לעשות כלום.

תנו ל-actions שמות לפי מה שהמשתמש עשה (added, toggled, deleted), לא לפי שינוי ה-state שיש לכם בראש (setTodos). כך הקומפוננטה נקראת כמו רשימת אירועים, וה-reducer הוא המקום היחיד שמחליט מה כל אירוע אומר.

reducers חייבים להיות טהורים

reducer הוא פונקציה טהורה: עבור אותו state ואותו action, הוא מחזיר את אותה תוצאה, ולא עושה שום דבר אחר. כלומר אין בו mutation, בקשות, טיימרים, Math.random() או Date.now(). React סומכת על זה. בפיתוח תחת StrictMode, React קוראת ל-reducer שלכם פעמיים לכל action ושומרת תוצאה אחת, כדי לעזור לכם לשים לב ל-reducer שאינו טהור. התצוגה המקדימה כאן רצה כמו build של פרודקשן, ולכן הדוגמאות בדף הזה קוראות לו פעם אחת.

כלל ה-mutation הוא זה שאנשים שוברים הכי הרבה. דחיפה לתוך state.todos והחזרת state מחזירה את אותו אובייקט, ולכן React לא רואה שינוי ומדלגת על הרינדור, אותה מלכודת שמתוארת ב-עדכון מערכים ואובייקטים. בנו מערכים ואובייקטים חדשים עם spread, map ו-filter.

// Wrong: mutates and returns the same object
case 'added':
    state.todos.push(action.todo);
    return state;

// Right: returns a new object with a new array
case 'added':
    return { ...state, todos: [...state.todos, action.todo] };

תופעות לוואי ששייכות לאירוע, כמו שמירה בשרת, הולכות ב-event handler ליד dispatch. תופעות לוואי ששייכות ל-state, כמו סנכרון שלו ל-localStorage, הולכות באפקט.

רשימת משימות עם useReducer

הנה ה-reducer עושה עבודה אמיתית: הוספה, סימון ומחיקה של משימות. ה-console.log בראש ה-reducer מדפיס כל action, דרך נוחה לראות איך ה-state משתנה בזמן דיבוג. זו תופעת הלוואי היחידה שבדרך כלל מקובלת ב-reducer, כי היא לא משנה כלום; הוציאו אותה לפני שמשחררים לפרודקשן.

import { useReducer, useState } from 'react';

let nextId = 3;

function todosReducer(todos, action) {
    console.log('action', action.type, action);
    switch (action.type) {
        case 'added':
            return [...todos, { id: action.id, text: action.text, done: false }];
        case 'toggled':
            return todos.map((t) => (t.id === action.id ? { ...t, done: !t.done } : t));
        case 'deleted':
            return todos.filter((t) => t.id !== action.id);
        default:
            throw new Error('Unknown action: ' + action.type);
    }
}

export default function App() {
    const [todos, dispatch] = useReducer(todosReducer, [
        { id: 1, text: 'Read the docs', done: true },
        { id: 2, text: 'Write a reducer', done: false },
    ]);
    const [text, setText] = useState('Ship it');

    return (
        <div>
            <input value={text} onChange={(e) => setText(e.target.value)} />
            <button onClick={() => { dispatch({ type: 'added', id: nextId++, text }); setText(''); }}>Add</button>
            <ul>
                {todos.map((t) => (
                    <li key={t.id}>
                        <label>
                            <input
                                type="checkbox"
                                checked={t.done}
                                onChange={() => dispatch({ type: 'toggled', id: t.id })}
                            />
                            {t.text}
                        </label>{' '}
                        <button onClick={() => dispatch({ type: 'deleted', id: t.id })}>Delete</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

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

ה-id של המשימה החדשה נוצר ב-handler של הלחיצה ועובר בתוך ה-action, כך שה-reducer רק מעתיק אותו. כתיבת id: nextId++ בתוך ה-reducer הייתה הופכת אותו ללא טהור: תחת StrictMode בפיתוח הקריאה השנייה הייתה מדלגת על id.

dispatch לא משנה את ה-state מיד

dispatch עובד כמו setter של useState: הוא מתזמן רינדור, והמשתנה state ב-handler הנוכחי שומר את הערך הישן. כדי להשתמש ב-state החדש מיד, חשבו אותו בעצמכם על ידי קריאה ל-reducer.

import { useReducer } from 'react';

function reducer(state, action) {
    if (action.type === 'add') return { total: state.total + action.amount };
    throw new Error('Unknown action: ' + action.type);
}

export default function App() {
    const [state, dispatch] = useReducer(reducer, { total: 0 });

    function addTen() {
        const action = { type: 'add', amount: 10 };
        dispatch(action);
        console.log('state.total after dispatch:', state.total);
        console.log('what the next render will see:', reducer(state, action).total);
    }

    return <button onClick={addTen}>Add 10 (total {state.total})</button>;
}

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

useState מול useReducer

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

פנו ל-useReducer כשאתם שמים לב שאותו state מתעדכן בהרבה handlers, כשאירוע אחד צריך לשנות כמה חלקי state שחייבים להישאר עקביים, או כש-handler הוא בעיקר לוגיקה על ה-state הבא. ל-toggle או לשדה טקסט, useState קצר וברור יותר. מעבר מאוחר יותר לא קשה: מחליפים את ה-setters ב-dispatches ומעבירים את הלוגיקה ל-cases.

אתחול עצל

אם כותבים את ה-state ההתחלתי כקריאה לפונקציה, כמו useReducer(reducer, createInitialState('Ada')), הקריאה הזו רצה בכל רינדור, למרות ש-React משתמשת בתוצאה שלה רק בפעם הראשונה. אם בניית ה-state ההתחלתי יקרה, או צריכה להיגזר מ-prop, העבירו ארגומנט שלישי: פונקציית init. React קוראת ל-init(initialArg) פעם אחת, ברינדור הראשון.

import { useReducer, useState } from 'react';

function createInitialState(username) {
    console.log('createInitialState runs for', username);
    const todos = [];
    for (let i = 1; i <= 3; i++) {
        todos.push({ id: i, text: `${username}'s task ${i}` });
    }
    return { todos };
}

function reducer(state, action) {
    if (action.type === 'cleared') return { todos: [] };
    throw new Error('Unknown action: ' + action.type);
}

export default function App() {
    const [state, dispatch] = useReducer(reducer, 'Ada', createInitialState);
    const [note, setNote] = useState('');

    return (
        <div>
            <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Type to re-render" />
            <ul>
                {state.todos.map((t) => <li key={t.id}>{t.text}</li>)}
            </ul>
            <button onClick={() => dispatch({ type: 'cleared' })}>Clear</button>
        </div>
    );
}

הקלידו בשדה: הקומפוננטה מתרנדרת בכל הקשה, אבל createInitialState נרשמת רק פעם אחת. עכשיו שנו את הקריאה ל-useReducer(reducer, createInitialState('Ada')) והקלידו שוב. הפונקציה רצה בכל רינדור, ו-React זורקת את התוצאה בכל פעם אחרי הראשונה.

העבירו את הפונקציה עצמה, לא את התוצאה של הקריאה אליה. useReducer(reducer, 'Ada', createInitialState) הוא עצל; useReducer(reducer, createInitialState('Ada')) לא.

useReducer עם קונטקסט

reducer משתלב טוב עם קונטקסט כשעץ עמוק צריך את ה-state. שימו את ה-state ואת dispatch בקונטקסט למעלה, וכל קומפוננטה מתחת יכולה לקרוא את ה-state או לשלוח actions בלי props שעוברים דרך כל שכבה. מכיוון ש-dispatch אף פעם לא משתנה, קומפוננטות שרק שולחות actions יכולות לקרוא קונטקסט dispatch נפרד ולדלג על רינדור מחדש כשה-state משתנה.

import { createContext, useContext, useReducer } from 'react';

const TodosContext = createContext(null);
const TodosDispatchContext = createContext(null);

export function TodosProvider({ children }) {
    const [todos, dispatch] = useReducer(todosReducer, []);
    return (
        <TodosContext value={todos}>
            <TodosDispatchContext value={dispatch}>{children}</TodosDispatchContext>
        </TodosContext>
    );
}

function AddTodo() {
    const dispatch = useContext(TodosDispatchContext);
    return <button onClick={() => dispatch({ type: 'added', text: 'New' })}>Add</button>;
}

ב-React 19 אובייקט קונטקסט עובד כ-provider של עצמו (<TodosContext value={...}>); גם <TodosContext.Provider> עדיין עובד. הדף על useContext מכסה איך קונטקסט מגיע לקומפוננטות ומתי הוא מרנדר אותן מחדש.