Reactالدالة useReducer()

import { useReducer } from "react";

const [state, dispatch] = useReducer(reducer, initialArg, init?)

import { useReducer } from "react";

// username و counter وضعنا فيه خاصيتين هما initialData هنا قمنا بتعريف كائن إسمه
// لإعطاء الكائن الذي سيتم مراقبة خصائصه قيم أولية useReducer() هذا الكائن سنمرره لاحقاً للدالة
const initialData = {
    counter: 0,
    username: 'Mhamad'
};

// سنستخدمها لتحديث قيم خصائص الكائن الذي سيستخدمها reducer هنا قمنا بتعريف دالة إسمها
// يمثل الكائن الذي يملك الخصائص المراد تحديث قيمها state الباراميتر
// هو نص يمثل نوع التغيير المراد فعله على خاصية محددة من خصائص الكائن action الباراميتر
function reducer(state, action) {
    // لمعرفة أي خاصية سيتم تحديثها action الموجودة في الباراميتر type هنا سيتم فحص قيمة الخاصية
    switch (action.type) {
        // فإنه سيتم إضافة 1 'counter_incremented' هي النص type إذا كانت قيمة الخاصية
        // state الموجودة في الكائن الذي يمثله الباراميتر counter على قيمة الخاصية
        case 'counter_incremented':
            return {
                ...state,
                counter: state.counter + 1
            };
        // فإنه سيتم تحديث 'username_changed' هي النص type إذا كانت قيمة الخاصية
        // state الموجودة في الكائن الذي يمثله الباراميتر username قيمة الخاصية
        case 'username_changed':
            return {
                ...state,
                username: action.username
            };
    }

    // فإنه سيتم رمي إستثناء switch تشير لفعل غير موجود في الجملة action إذا كانت قيمة
    throw Error('Unknown action: ' + action.type);
}

// MyComponent هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function MyComponent() {
    // dispatch() عبارة عن كائن يمكن تحديث قيمه بواسطة دالة إسمها state هنا قمنا بتعريف متغير إسمه
    // حتى تحدث القيم reducer() فإنها بشكل تلقائي ستسدعي الدالة dispatch() عند استدعاء الدالة
    const [state, dispatch] = useReducer(reducer, initialData);
    
    // لمراقبة أي تغيير يحصل في قيمة مربع النص handleInputChange() هنا قمنا بتعريف الدالة
    // dispatch() عن طريق الدالة state الموجودة في الكائن username و من ثم تمرير القيمة الجديدة للخاصية
    const handleInputChange = (e) => {
        dispatch({
            type: "username_changed",
            username: e.target.value
        });
    };

    // لرصد أي نقرة تتم على الزر handleInputChange() هنا قمنا بتعريف الدالة
    // dispatch() عن طريق الدالة state الموجودة في الكائن counter حتى يتم إضافة 1 على قيمة الخاصية 
    const handleButtonClick = () => {
        dispatch({type: "counter_incremented"});
    };

    // state و قد عرضنا فيه جميع قيم الكائن MyComponent هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    // state.counter و زر لتغيير قيمة state.username بالإضافة إلى مربع نص يمكن من خلاله تغيير قيمة الخاصية
    return (
        <>
            <input value={state.username} onChange={(e) => handleInputChange(e)} />
            <button onClick={() => handleButtonClick()}>Increase counter</button>
            <p>{state.username} clicks on the button {state.counter} times.</p>
        </>
    );
}

// يمكن الوصول إليه من خارج هذا الملف MyComponent هنا قمنا بجعل المكون
export default MyComponent;

import { useReducer } from "react";

// وضعنا فيها ثلاث كائنات initialTasks هنا قمنا بتعريف مصفوفة إسمها
// لإعطاء المصفوفة التي سيتم مراقبة قيمها قيم أولية useReducer() هذه المصفوفة سنمررها لاحقاً للدالة
const initialTasks = [
    {
        id: 1,
        title: 'Task 1',
        completed: true
    },
    {
        id: 2,
        title: 'Task 2',
        completed: false
    },
    {
        id: 3,
        title: 'Task 3',
        completed: false
    }
];

// سنستخدمها لتحديث قيم عناصر المصفوفة التي ستستخدمها reducer هنا قمنا بتعريف دالة إسمها
// يمثل المصفوفة التي فيها العناصر (الكائنات) المراد تحديث خصائصها state الباراميتر
// هو نص يمثل نوع التغيير المراد فعله على خصائص عنصر (كائن) محدد في المصفوفة action الباراميتر
function reducer(state, action) {
    // لمعرفة أي خصائص سيتم تحديثها في الكائن action الموجودة في الباراميتر type هنا سيتم فحص قيمة الخاصية
    switch (action.type) {
        // فإنه سيتم تنفيذ الأوامر التالية 'completed' هي النص type إذا كانت قيمة الخاصية
        case "completed":
            // و عندما يتم إيجاد عنصر يملك نفس قيمة state هنا سيتم المرور على عناصر المصفوفة
            // الموجودة complete فإنه سيتم عكس قيمة action التي تم تمريرها كخاصية في الباراميتر id
            // true ستصبح false و إذا كانت ،false ستصبح true  في العنصر (الكائن)، بمعنى إذا كانت
            return state.map((task) => {
                if (task.id === action.id) {
                    return {
                        ...task, completed:
                        !task.completed
                    };
                }
                return task;
            });
    }
    
    // فإنه سيتم رمي إستثناء switch تشير لفعل غير موجود في الجملة action إذا كانت قيمة
    throw Error('Unknown action: ' + action.type);
}

// MyComponent هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function MyComponent() {
    // dispatch() عبارة يمكن تحديث قيمه بواسطة دالة إسمها tasks هنا قمنا بتعريف مصفوفة إسمها
    // حتى تحدث القيم reducer() فإنها بشكل تلقائي ستسدعي الدالة dispatch() عند استدعاء الدالة
    const [tasks, dispatch] = useReducer(reducer, initialTasks);

    // لمراقبة أي تغيير يحصل في قيمة خانة الإختيار handleComplete() هنا قمنا بتعريف الدالة
    // dispatch() عن طريق الدالة state الموجودة في عنصر محدد في الكائن completed و من ثم تمرير القيمة الجديدة للخاصية
    const handleComplete = (task) => {
        dispatch({
            type: "completed",
            id: task.id
        });
    };

    // MyComponent هنا قمنا بتحضير ما سيتم عرضه عند تضمين المكوّن
    // tasks و قد عرضنا فيه جميع خصائص جميع عناصر المصفوفة 
    return (
        <>
            {tasks.map((task) => (
                <div key={task.id}>
                    <label>
                        <input
                            type="checkbox"
                            checked={task.completed}
                            onChange={() => handleComplete(task)}
                        />
                        {task.title}
                    </label>
                </div>
            ))}
        </>
    );
}

// يمكن الوصول إليه من خارج هذا الملف MyComponent هنا قمنا بجعل المكون
export default MyComponent;