כיצד להשתמש בהקשר של React לניהול מצב ב-Next.js 13

Next.js מציע מספר גישות לניהול מדינה. בעוד שחלק מהשיטות הללו דורשות התקנת ספריות חדשות, ה-Context API של React מובנה, כך שזו דרך מצוינת להפחית תלות חיצונית.

עם React Context, אתה יכול להעביר נתונים בצורה חלקה דרך חלקים שונים של עץ הרכיבים שלך, ולבטל את הטרחה של קידוח משענת. זה שימושי במיוחד לניהול מצב גלובלי כמו סטטוס המחובר של המשתמש הנוכחי או הנושא המועדף עליו.

הבנת ממשק API של React Context

לפני שצולל לתוך הקוד, חשוב לעשות זאת להבין מהו ממשק API של React Context ובאיזה בעיה הוא מטפל.

אביזרים מספקים שיטה יעילה לשיתוף נתונים בין רכיבים. הם מאפשרים לך להעביר נתונים מרכיב אב לרכיבי הצאצא שלו.

גישה זו שימושית מכיוון שהיא מראה בבירור אילו רכיבים משתמשים בנתונים מסוימים וכיצד הנתונים הללו זורמים במורד עץ הרכיבים.

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

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

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

אתה יכול למצוא את הקוד של הפרויקט הזה בו GitHub מאגר.

תחילת העבודה עם ניהול מצב ב-Next.js 13 באמצעות ממשק API של React Context

רכיבי השרת של Next.js מאפשרים לך ליצור יישומים שמפיקים את המיטב משני העולמות: האינטראקטיביות של אפליקציות בצד הלקוח ויתרונות הביצועים של עיבוד שרת.

Next.js 13 מיישמת רכיבי שרת ב- אפליקציה ספרייה - שהיא כעת יציבה - כברירת מחדל. עם זאת, מכיוון שכל הרכיבים מעובדים בשרת, אתה עלול להיתקל בבעיות בעת שילוב ספריות בצד הלקוח או ממשקי API כגון 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>
 );
};

ההגדרה הזו של React Context מגדירה את א TodoContext שמחזיק בתחילה את המצב של רשימת מטלות ריקה עבור האפליקציה.

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

ה TodoContextProvider הרכיב מספק את TodoContext לרכיבים אחרים באפליקציה. רכיב זה לוקח שני אביזרים: ה-value prop, שהוא המצב ההתחלתי של ההקשר, ו-reducer prop, שהוא פונקציית המפחית.

כאשר רכיב צורך את 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>
 );
}

צור רכיב מטלה

צור קובץ חדש, src/components/Todo.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"
 />
Add Todo</button>



 {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 של ה-boilerplate והוסף את הקוד למטה:

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


 </main>
 )
}

גדול! בשלב זה, אתה אמור להיות מסוגל לנהל את המצב באפליקציית To-do Next.js באמצעות React Context.

שימוש ב-React Context API עם טכנולוגיות אחרות לניהול מצב

ממשק ה-API של React Context הוא פתרון מצוין לניהול מדינה. אף על פי כן, אפשר להשתמש בו לצד ספריות אחרות לניהול מדינה כמו Redux. גישה היברידית זו מבטיחה להשתמש בכלי הטוב ביותר עבור חלקים שונים של האפליקציה שלך המבצעים תפקידי מפתח.

על ידי כך, אתה יכול לנצל את היתרונות של פתרונות ניהול מדינה שונים כדי ליצור יישומים יעילים וניתנים לתחזוקה.