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

גישה טובה יותר תהיה להפריד את היגיון ניהול המצב שלך מהרכיבים ולעדכן את המצבים הללו מכל מקום ביישום שלך. אנו נדריך אותך כיצד להשתמש ב-Context API כאשר אנו בונים יישום פשוט של רשימת מטלות.

לפני שתתחיל ברשימת המטלות שלך

לפני שתוכל לבנות את יישום רשימת המטלות, תצטרך:

  • ידע בסיסי ב מפעילי JavaScript מודרניים ו Hook useState של React.
  • הבנה איך לעשות הרס מערכים ואובייקטים ב-JavaScript.
  • צוֹמֶת v16.8 ואילך מותקן במחשב המקומי שלך והיכרות עם מנהלי חבילות כמו npm או חוט.

אתה יכול למצוא את הפרויקט המוגמר ב GitHub לעיון וחקירה נוספת.

הבנת מצב יישום וניהול

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

כדי להבין את מצב היישום, שקול את המצבים האפשריים של יישום נגד פשוט. הם כוללים:

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

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

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

const [counter, setCounter] = useState(0);
לַחֲזוֹר (

{counter}</h1>

התקנה והתקנה

מאגר הפרויקט מכיל שני ענפים: מַתנֵעַ ו הֶקשֵׁר. אתה יכול להשתמש בענף המתחיל כבסיס לבניית הפרויקט או בענף ההקשר כדי לצפות בתצוגה מקדימה של ההדגמה הסופית.

שיבוט אפליקציית Starter

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

git שיבוט -b מתנע https://github.com/makeuseofcode/Next.js-CRUD-todo-app.git

הפעל את הפקודה הבאה, בתוך ספריית הפרויקט, כדי להתקין את התלות ולהפעיל את שרת הפיתוח שלך:

yarn && yarn dev

אוֹ:

npm i && npm להפעיל dev

אם הכל הלך כשורה, ממשק המשתמש אמור להופיע בדפדפן שלך:

יישום ההיגיון

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

שלב 1: צור ויצוא הקשר

ליצור src/app/context תיקיה כדי לאחסן את קובץ ההקשר ולשמור על סדרת ספריית הפרויקט. בתוך תיקיה זו, צור א todo.context.jsx קובץ שיכיל את כל הלוגיקה של ההקשר עבור היישום.

ייבא את ליצור הקשר פונקציה מה לְהָגִיב ספריה וקוראים לה, מאחסנים את התוצאה במשתנה:

יְבוּא { createContext} מ"לְהָגִיב";
const TodoContext = createContext();

לאחר מכן, צור מותאם אישית השתמש בTodoContext וו שמחזיר TodoContext בצורתו השמישה.

יְצוּאconst useTodoContext = () => useContext (TodoContext);

שלב 2: צור ונהל מדינות

כדי לבצע את פעולות ה-CRUD (צור, קריאה, עדכן, מחק) של האפליקציה, תצטרך ליצור את המצבים ולנהל אותם באמצעות ספק רְכִיב.

const TodoContextProvider = ({ ילדים }) => {
const [משימה, setTask] = useState("");
const [tasks, setTasks] = useState([]);
לַחֲזוֹר<TodoContext. ספקערך={{}}>{יְלָדִים}TodoContext. ספק>;
};
יְצוּאבְּרִירַת מֶחדָל TodoContextProvider;

רגע לפני ה לַחֲזוֹר הצהרה, ליצור א handleTodoInput פונקציה שתפעל כאשר המשתמש מקליד מטלה. לאחר מכן פונקציה זו מעדכנת את מְשִׁימָה מדינה.

const handleTodoInput = (קֶלֶט) => setTask (קלט);

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

const createTask = (ה) => {
 e.preventDefault();
 setTasks([
 {
 תְעוּדַת זֶהוּת: מתמטיקה.trunc(מתמטיקה.random() * 1000 + 1),
 מְשִׁימָה,
 },
 ...משימות,
 ]);
 };

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

const updateTask = (id, updateText) =>
 setTasks (tasks.map((ט) => (מזהה t.id? { ...t, מְשִׁימָה: updateText }: t)));

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

const deleteTask = (תְעוּדַת זֶהוּת) => setTasks (tasks.filter((ט) => t.id !== id));

שלב 3: הוסף מדינות ומטפלים לספק

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

לַחֲזוֹר (
 value={{
 מְשִׁימָה,
 משימות,
 handleTodoInput,
 createTask,
 updateTask,
 מחק משימה,
 }}
 >
 {יְלָדִים}
 </TodoContext.Provider>
);

שלב 4: תחום ההקשר

ה ספק שיצרת חייב לעטוף את הרכיב ברמה העליונה כדי להפוך את ההקשר לזמין לכל היישום. כדי לעשות זאת, ערוך src/app/page.jsx ולעטוף את לעשות רכיב עם ה TodoContextProvider רְכִיב:


;
</TodoContextProvider>;

שלב 5: השתמש בהקשר ברכיבים

ערוך את שלך src/app/components/Todos.jsx לתיק ולפרק משימות, משימה, handleTodoInput, ו ליצור משימה באמצעות שיחה ל השתמש בTodoContext פוּנקצִיָה.

const { task, tasks, handleTodoInput, createTask } = useTodoContext();

כעת, עדכן את רכיב הטופס כדי לטפל באירוע השליחה ושינויים בשדה הקלט הראשי:

 createTask (ה)}>
"קלט מטלות" סוג="טֶקסט" מציין מיקום="הזן משימה" ערך נדרש={משימה} onChange={(e) => handleTodoInput (e.target.value)} />
"הגש-מטלות" סוג="שלח" ערך="הוסף משימה" />
</form>

שלב 6: עיבוד משימות בממשק המשתמש

כעת תוכל להשתמש באפליקציה כדי ליצור ולהוסיף משימה ל- משימות רשימה. כדי לעדכן את התצוגה, תצטרך למפות דרך קיים משימות ולעבד אותם בממשק המשתמש. ראשית, צור א src/app/components/Todo.jsx רכיב כדי להחזיק פריט מטלה בודד.

בתוך ה src/app/components/Todo.jsx רכיב, ערוך או מחק משימה על ידי הפעלת ה- updateTask ו מחק משימה פונקציות שיצרנו בהן src/app/context/todo.context.jsx קוֹבֶץ.

יְבוּא תגובה, { useState } מ"לְהָגִיב";
יְבוּא { useTodoContext } מ"../context/todo.context";
const Todo = ({ משימה }) => {
const { updateTask, deleteTask } = useTodoContext();


// isEdit state עוקב אחר כאשר משימה נמצאת במצב עריכה
const [isEdit, setIsEdit] = useState(שֶׁקֶר);


לַחֲזוֹר (

"עטיפת מטלות">


 {זה עריכה? ( <קֶלֶטסוּג="טֶקסט"ערך={task.task}
 onChange={(e) => updateTask (task.id, e.target.value)} /> ):
 (<ה'className="מְשִׁימָה">{task.task}ה'> )}



"פעולות">






יְצוּאבְּרִירַת מֶחדָל לעשות;

כדי לעבד את src/app/components/Todo.jsx רכיב עבור כל אחד מְשִׁימָה, היכנס ל src/app/components/Todos.jsx קובץ ומפה על תנאי דרך ה משימות מיד אחרי ה כּוֹתֶרֶת תג סגירה.

{משימות &&(

 {tasks.map((משימה, אני) => ( <לעשותמַפְתֵחַ={אני}מְשִׁימָה={מְשִׁימָה} /> ))}
</main>
)}

בדוק את היישום שלך בדפדפן ואשר שהוא נותן את התוצאה הצפויה.

שמירת משימות באחסון מקומי

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

ממשק ה-API לאחסון אינטרנט הוא שיפור באחסון קובצי Cookie, עם תכונות שמשפרות את החוויה עבור משתמשים ומפתחים כאחד.