تُعد واجهة برمجة التطبيقات السياقية المضمنة في React مثالية لمشاركة الحالة. تعرف على كيفية استخدامه مع أحدث إصدار من Next.js.

يقدم Next.js عدة طرق لإدارة الحالة. على الرغم من أن بعض هذه الطرق تتطلب تثبيت مكتبات جديدة، إلا أن واجهة برمجة التطبيقات الخاصة بـ React مدمجة، لذا فهي طريقة رائعة لتقليل التبعيات الخارجية.

باستخدام React context، يمكنك تمرير البيانات بسلاسة عبر أجزاء مختلفة من شجرة المكونات الخاصة بك، مما يزيل متاعب حفر الدعامات. يعد هذا مفيدًا بشكل خاص لإدارة الحالة العامة مثل حالة تسجيل دخول المستخدم الحالي أو السمة المفضلة لديه.

فهم واجهة برمجة تطبيقات سياق التفاعل

قبل الغوص في التعليمات البرمجية، من المهم فهم ما هي واجهة برمجة تطبيقات سياق التفاعل وما هي المشكلة التي يعالجها.

توفر الدعائم طريقة فعالة لمشاركة البيانات بين المكونات. إنها تسمح لك بتمرير البيانات من المكون الأصلي إلى مكوناته الفرعية.

يعد هذا الأسلوب مفيدًا لأنه يوضح بوضوح المكونات التي تستخدم بيانات معينة وكيفية تدفق تلك البيانات إلى أسفل شجرة المكونات.

ومع ذلك، تنشأ المشاكل عندما يكون لديك مكونات متداخلة بعمق وتحتاج إلى استهلاك نفس الدعائم. يمكن أن يؤدي هذا الموقف إلى تعقيدات وربما يؤدي إلى تعليمات برمجية معقدة يصعب الحفاظ عليها. هذه القضايا، من بين أمور أخرى، هي

instagram viewer
عيوب الحفر الدعامة.

يعمل React context على حل هذا التحدي من خلال توفير طريقة مركزية لإنشاء واستخدام البيانات التي يجب أن تكون متاحة عالميًا عبر المكونات.

فهو يقوم بإعداد سياق للاحتفاظ بهذه البيانات، مما يسمح للمكونات بالوصول إليها. يساعدك هذا الأسلوب على تنظيم قاعدة التعليمات البرمجية الخاصة بك لضمان تنظيمها بشكل جيد.

يمكنك العثور على رمز هذا المشروع في ملف جيثب مخزن.

البدء في إدارة الحالة في Next.js 13 باستخدام React context API

تسمح لك مكونات خادم Next.js بإنشاء تطبيقات تحقق أفضل ما في كلا العالمين: تفاعل التطبيقات من جانب العميل ومزايا الأداء لعرض الخادم.

يقوم Next.js 13 بتنفيذ مكونات الخادم في ملف برنامج الدليل - الذي أصبح الآن مستقرًا - افتراضيًا. ومع ذلك، نظرًا لأن جميع المكونات يتم عرضها بواسطة الخادم، فقد تواجه مشكلات عند دمج المكتبات أو واجهات برمجة التطبيقات من جانب العميل مثل React context.

لتجنب هذا، الحل الأمثل هو استخدام العميل علامة يمكنك تعيينها على الملفات التي ستقوم بتشغيل تعليمات برمجية من جانب العميل.

للبدء، أنشئ مشروع Next.js 13 محليًا عن طريق تشغيل هذا الأمر في جهازك الطرفي:

npx create-next-app@latest next-context-api

بعد إنشاء المشروع، انتقل إلى الدليل الخاص به:

cd next-context-api

ثم ابدأ خادم التطوير:

npm run dev

بمجرد إعداد مشروع Next.js أساسي، يمكنك إنشاء تطبيق مهام أساسي يستخدم React context API لإدارة الحالة.

إنشاء موفر السياق

يعمل ملف موفر السياق كمحور مركزي حيث يمكنك تحديد وإدارة الحالة العامة التي تحتاج المكونات للوصول إليها.

إنشاء ملف جديد، src/context/Todo.context.js، ثم املأها بالكود التالي.

"use client"
import React, { createContext, useReducer } from"react";


const initialState = {
 todos: [],
};


const reducer = (state, action) => {
switch (action.type) {
case"ADD_TODO":
return { ...state, todos: [...state.todos, action.payload] };


case"DELETE_TODO":
return { ...state, todos: state.todos.filter((todo, index) =>
 index !== action.payload) };


case"EDIT_TODO":
const updatedTodos = state.todos.map((todo, index) =>
 index action.payload.index? action.payload.newTodo: todo);
return { ...state, todos: updatedTodos };


default:
return state;
 }
};


exportconst TodoContext = createContext({
 state: initialState,
 dispatch: () =>null,
});


exportconst TodoContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
return (

 {children}
 </TodoContext.Provider>
 );
};

يحدد إعداد سياق التفاعل هذا أ TodoContext والذي يحتفظ في البداية بحالة قائمة المهام الفارغة للتطبيق.

بصرف النظر عن إنشاء الحالة الأولية، يتضمن تكوين السياق هذا ملفًا المخفض وظيفة تحدد أنواع الإجراءات المختلفة. ستقوم أنواع الإجراءات هذه بتعديل حالة السياق اعتمادًا على الإجراءات التي تم تشغيلها. في هذه الحالة، تتضمن الإجراءات إضافة المهام وحذفها وتحريرها.

ال TodoContextProvider يوفر المكون TodoContext إلى غيرها من المكونات في التطبيق. يأخذ هذا المكون خاصيتين: خاصية القيمة، وهي الحالة الأولية للسياق، ودعامة المخفض، وهي وظيفة المخفض.

عندما يستهلك أحد المكونات TodoContext، يمكنه الوصول إلى حالة السياق وإرسال الإجراءات لتحديث الحالة.

أضف موفر السياق إلى تطبيق Next.js

الآن، للتأكد من أن موفر السياق يعرض في جذر تطبيق Next.js الخاص بك، وأن جميع مكونات العميل يمكنها الوصول إليه، تحتاج إلى إضافة السياق إلى مكون التخطيط الجذري للتطبيق.

للقيام بذلك، افتح src/app/layout.js ملف ولف العقدة الفرعية في قالب HTML مع موفر السياق كما يلي:

import'./globals.css';
import { TodoContextProvider } from"@/context/Todo.context";
exportconst metadata = {
 title: "Create Next App",
 description: "Generated by create next app",
};
exportdefaultfunctionRootLayout({
 children
}) {
return (
"en">

{children}</TodoContextProvider>
 </body>
 </html>
 );
}

إنشاء مكون المهام

إنشاء ملف جديد، سرك/مكونات/تودو.js، وأضف إليه الكود التالي.

ابدأ بإجراء الواردات التالية. تأكد من تضمين استخدام العميل علامة لوضع علامة على هذا المكون كمكون من جانب العميل.

"use client"
import { TodoContext } from"@/context/Todo.context";
import React, { useContext, useState } from"react";

بعد ذلك، حدد المكون الوظيفي، بما في ذلك عناصر JSX التي سيتم عرضها على المتصفح.

exportdefaultfunctionTodo() {
return (
marginBottom: "4rem", textAlign: "center" }}>
Todos</h2>



 type="text"
 value={todoText}
 onChange={(e) => setTodoText(e.target.value)}
 style={{ marginBottom: 16}}
 placeholder="Enter a todo"
 />






    

     {state.todos.map((todo, index) => (
  • 

     {index editingIndex? (
     <>
     type="text"
     value={editedTodo}
     onChange={(e) => setEditedTodo(e.target.value)}
     />
    • 



 style={{ marginRight: 16}} 
 onClick={() => handleEditTodo(index, editedTodo)}
 >
 Save
 </button>
 </>
 ): (
 <>
 {todo}
 style={{ marginRight: 16}} 
 onClick={() => setEditingIndex(index)}
 >Edit</button>


 onClick={() => handleDeleteTodo(index)}
 >Delete</button>
 </>
 )}
 </li>
 ))}
 </ul>
 </div>
 );
}

يتضمن هذا المكون الوظيفي حقول إدخال لإضافة المهام وتحريرها وحذفها، بالإضافة إلى الأزرار المقابلة. يستخدم العرض الشرطي لـ React لإظهار أزرار التحرير والحذف بناءً على قيمة فهرس التحرير.

وأخيرًا، حدد متغيرات الحالة المطلوبة ووظائف المعالج المطلوبة لكل نوع إجراء. داخل مكون الوظيفة، أضف الكود التالي.

const { state, dispatch } = useContext(TodoContext);
const [todoText, setTodoText] = useState("");
const [editingIndex, setEditingIndex] = useState(-1);
const [editedTodo, setEditedTodo] = useState("");
const handleAddTodo = () => {
if (todoText.trim() !== "") {
 dispatch({ type: "ADD_TODO", payload: todoText });
 setTodoText("");
 }
 };


const handleDeleteTodo = (index) => {
 dispatch({ type: "DELETE_TODO", payload: index });
 };
const handleEditTodo = (index, newTodo) => {
 dispatch({ type: "EDIT_TODO", payload: { index, newTodo } });
 setEditingIndex(-1);
 setEditedTodo("");
 };

تكون وظائف المعالج هذه مسؤولة عن معالجة إضافة وحذف وتحرير مهام المستخدم ضمن حالة السياق.

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

تقديم مكون المهام

وأخيرًا، قم باستيراد مكون المهام إلى مكون الصفحة.

للقيام بذلك، افتح ملف page.js في دليل src/app، واحذف الكود المعياري Next.js، وأضف الكود أدناه:

import styles from'./page.module.css'
import Todo from'../components/Todo'
exportdefaultfunctionHome() {
return (


 </main>
 )
}

عظيم! في هذه المرحلة، يجب أن تكون قادرًا على إدارة الحالة في تطبيق To-do Next.js باستخدام React context.

استخدام واجهة برمجة تطبيقات سياق التفاعل مع تقنيات إدارة الحالة الأخرى

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

ومن خلال القيام بذلك، يمكنك الاستفادة من فوائد حلول إدارة الحالة المختلفة لإنشاء تطبيقات فعالة وقابلة للصيانة.