شرح صفوف ومحتوى الفقرة
لإبقاء المكون الجذري App نظيفاً ومختصراً، انقل كلاً من السياقين ودالة المخفض tasksReducer والبيانات الابتدائية ومكون التغليف TasksProvider({ children }) إلى ملف وحدة برمجية مستقلة مثل TasksContext.jsx.
داخل TasksProvider يتولى استدعاء واحد لخطاف useReducer إدارة دورة حياة البيانات وتغذية المزودين المتداخلين معاً، فتتعامل بقية ملفات المشروع مع <TasksProvider> كوحدة جاهزة مكتفية ذاتياً.
HTML
export function TasksProvider({ children }) {
const [tasks, dispatch] = useReducer(reducer, init);
return (
<TasksContext.Provider value={tasks}>
<TasksDispatchContext.Provider value={dispatch}>
{children}
</TasksDispatchContext.Provider>
</TasksContext.Provider>
);
}