useReducer في React: الصيغة وأمثلة ومقارنة بـ useState

useReducer خطاف في React يحتفظ بالحالة مثل useState، لكنه ينقل كل طرق تغييرها إلى دالة واحدة، هي المختزل (reducer). يستدعي مكوّنك dispatch بكائن إجراء مثل { type: 'increment' }، فتمرر React الحالة الحالية وذلك الإجراء إلى المختزل، الذي يُرجع الحالة التالية.

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. عرّفها خارج المكوّن؛ فهي لا تحتاج إلى أي شيء من نطاق المكوّن.
• initialArg هي الحالة الابتدائية، وتُستخدم في العرض الأول فقط.
• init اختيارية. إذا مررتها، تكون الحالة الابتدائية init(initialArg) بدلًا من ذلك.
• state هي الحالة الحالية لهذا العرض.
• يرسل dispatch(action) إجراءً إلى المختزل ويجدول عرضًا بالنتيجة. وهو ثابت: الدالة نفسها في كل عرض، فمن الآمن تمريره إلى الأسفل أو إدراجه كاعتمادية.

يمكن للإجراء أن يكون أي قيمة، لكنه اصطلاحًا كائن فيه نص type يصف ما حدث، إضافة إلى أي بيانات يحتاجها المختزل: { type: 'added', text: 'Buy milk' }.

كتابة مختزل

معظم المختزلات عبارة switch على action.type، مع case واحدة لكل نوع من الأحداث. كل حالة تُرجع حالة جديدة تمامًا؛ ولا تغيّر القديمة أبدًا. والحالة default ترمي خطأ، فيفشل خطأ إملائي مثل dispatch({ type: 'incremnet' }) بصوت عالٍ بدلًا من ألا يفعل شيئًا.

سمِّ الإجراءات بحسب ما فعله المستخدم (added وtoggled وdeleted)، لا بحسب تغيير الحالة الذي في ذهنك (setTodos). عندها يُقرأ المكوّن كقائمة أحداث، ويكون المختزل المكان الوحيد الذي يقرر معنى كل حدث.

يجب أن تكون المختزلات نقية

المختزل دالة نقية: بالحالة والإجراء نفسيهما يُرجع النتيجة نفسها، ولا يفعل شيئًا آخر. وهذا يعني لا تعديل مباشر، ولا طلبات، ولا مؤقتات، ولا Math.random() أو Date.now() بداخله. تعتمد React على ذلك. في التطوير مع StrictMode، تستدعي React مختزلك مرتين لكل إجراء وتحتفظ بنتيجة واحدة، لتساعدك على ملاحظة المختزل غير النقي. أما المعاينة هنا فتعمل مثل بناء الإنتاج، فتستدعيه الأمثلة في هذه الصفحة مرة واحدة.

قاعدة عدم التعديل المباشر هي الأكثر خرقًا. الإضافة إلى state.todos ثم إرجاع state يُرجع الكائن نفسه، فلا ترى React أي تغيير وتتخطى العرض، وهو الفخ نفسه الموصوف في تحديث المصفوفات والكائنات. ابنِ مصفوفات وكائنات جديدة بالنشر و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] };

الآثار الجانبية التي تنتمي إلى حدث، مثل الحفظ على خادم، توضع في معالج الحدث بجانب dispatch. والآثار الجانبية التي تنتمي إلى الحالة، مثل مزامنتها مع localStorage، توضع في تأثير.

قائمة مهام باستخدام useReducer

إليك المختزل يؤدي عملًا حقيقيًا: إضافة المهام وتبديلها وحذفها. يطبع console.log في أعلى المختزل كل إجراء، وهي طريقة مفيدة لمراقبة تغيّر الحالة أثناء تصحيح الأخطاء. إنه الأثر الجانبي الوحيد المقبول عادة في المختزل، لأنه لا يغيّر شيئًا؛ أزله قبل النشر.

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>
    );
}

أضف مهمة، وحدّد مربعًا واحذف مهمة، ثم اقرأ وحدة التحكم: كل تغيير سطر واحد يسمّي الإجراء وبياناته. يبقى نص الحقل في useState، لأنه محلي للحقل ولا يلمسه أي حدث آخر. المزج بين الخطافين في مكوّن واحد أمر طبيعي.

يُنشأ معرّف المهمة الجديدة في معالج النقر وينتقل في الإجراء، فلا يفعل المختزل إلا نسخه. كتابة id: nextId++ داخل المختزل ستجعله غير نقي: مع StrictMode في التطوير سيتخطى الاستدعاء الثاني معرّفًا.

لا يغيّر dispatch الحالة فورًا

يعمل dispatch مثل دالة الضبط في useState: يجدول عرضًا، ويحتفظ المتغير state في معالجك الحالي بالقيمة القديمة. لاستخدام الحالة الجديدة فورًا، احسبها بنفسك باستدعاء المختزل.

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>;
}

انقر بضع مرات. سطر السجل الأول متأخر دائمًا بخطوة، والثاني يطابق الرقم على الزر بعد العرض. لأن المختزل دالة عادية، فاستدعاؤه بنفسك آمن، وهذه فائدة أخرى لإبقائه نقيًا.

useState مقابل useReducer

يخزن كلا الخطافين الحالة، وكل ما تكتبه بأحدهما يمكنك كتابته بالآخر. الفرق هو أين يعيش منطق التحديث.

الجأ إلى useReducer عندما تلاحظ أن الحالة نفسها تُحدَّث في معالجات كثيرة، أو عندما يجب أن يغيّر حدث واحد عدة قطع من الحالة يجب أن تبقى متسقة، أو عندما يكون المعالج في معظمه منطقًا عن الحالة التالية. أما لمفتاح تبديل أو حقل نصي، فـ useState أقصر وأوضح. والتحويل لاحقًا ليس صعبًا: استبدل دوال الضبط بعمليات dispatch وانقل المنطق إلى حالات.

التهيئة الكسولة

إذا كتبت الحالة الابتدائية كاستدعاء دالة، مثل useReducer(reducer, createInitialState('Ada'))، فإن ذلك الاستدعاء يعمل في كل عرض، رغم أن React لا تستخدم نتيجته إلا في المرة الأولى. إذا كان بناء الحالة الابتدائية مكلفًا، أو ينبغي اشتقاقه من 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 مع السياق

يقترن المختزل جيدًا بالسياق عندما تحتاج شجرة عميقة إلى الحالة. ضع الحالة وdispatch في السياق في الأعلى، فيستطيع أي مكوّن في الأسفل قراءة الحالة أو إرسال الإجراءات دون props تُمرَّر عبر كل طبقة. ولأن dispatch لا يتغير أبدًا، يمكن للمكوّنات التي ترسل الإجراءات فقط أن تقرأ سياقًا منفصلًا لـ dispatch وتتخطى إعادة العرض عندما تتغير الحالة.

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 يعمل كائن السياق كمزوّد بنفسه (<TodosContext value={...}>)؛ وما زال <TodosContext.Provider> يعمل أيضًا. تتناول صفحة useContext كيف يصل السياق إلى المكوّنات ومتى يعيد عرضها.