חקירת ניהול המדינה ב-React Using Jotai: מדריך מעשי

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

בעוד Redux מציעה פתרון נהדר לניהול מצב, ה-API שלו יכול להיות מכריע עבור פרויקטים קטנים יחסית. לעומת זאת, Jotai, ספריית ניהול מדינה מינימלית הממנפת יחידות עצמאיות של מדינות הנקראות אטומים לניהול המדינה, מבטל אתגרים כמו קידוחי תמיכה ומאפשר ניהול מדינה פשוט וניתן להרחבה יותר גִישָׁה.

מה זה ג'וטאי ואיך זה עובד?

ג'וטאי היא ספריית ניהול מדינה המציעה פתרון פשוט לניהול מצב בניגוד לחלופות מורכבות יותר כמו Redux. הוא משתמש ביחידות מדינה עצמאיות הנקראות אטומים כדי לנהל מצב באפליקציית React.

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

יְבוּא { אטום } מ'ג'וטאי';
const countAtom = אטום(1);

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

הנה דוגמה להדגמת השימוש בו:

יְבוּא { useAtom } מ'ג'וטאי';
const countAtom = אטום(1);
פוּנקצִיָהMyComponent() {
const [count, setCount] = useAtom (countAtom);
const תוספת = () => setCount((prevCount) => prevCount + 1);
לַחֲזוֹר (


ספירה: {count}</p>
הגדלה</button>
 </div>
 );
}

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

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

עם היסודות מחוץ לדרך, בואו נבנה אפליקציית To-do React פשוטה כדי להבין טוב יותר את יכולות ניהול המדינה של Jotai.

ניהול המדינה בתגובה באמצעות ג'וטאי

להתחיל, ליצור אפליקציית React. לחילופין, אתה יכול השתמש ב-Vite כדי להגדיר פרויקט React. לאחר פיגום אפליקציית React בסיסית, קדימה להתקין את Jotai באפליקציה שלך.

npm להתקין את jotai

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

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

יְבוּא { ספק } מ"ג'וטאי";

כעת עטפו את האפליקציה ב- index.js אוֹ main.jsx כפי שמוצג מטה.

יְבוּא לְהָגִיב מ'לְהָגִיב'
יְבוּא ReactDOM מ'react-dom/client'
יְבוּא אפליקציה מ'./App.jsx'
יְבוּא'./index.css'
יְבוּא { ספק } מ"ג'וטאי";
ReactDOM.createRoot(מסמך.getElementById('שורש')).לְדַקלֵם(



 </Provider>
 </React.StrictMode>,
)

הגדר מאגר נתונים

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

במקרה זה, הוא מנהל את האטומים לניהול רשימת הפריטים עבור אפליקציית המטלות. בתוך ה src ספרייה, צור TodoStore.jsx קובץ, והוסיפו את הקוד למטה.

יְבוּא { אטום } מ"ג'וטאי";
יְצוּאconst TodosAtom = atom([]);

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

יישם את פונקציונליות היישום 'מטלות'

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

ליצור חדש רכיבים/Todo.jsx קובץ ב- src מַדרִיך. בקובץ זה, הוסף את הקוד שלהלן:

1. ייבא את מאגר הנתונים ואת השתמש בAtom וו.

   יְבוּא תגובה, { useState } מ'לְהָגִיב';
   יְבוּא { TodosAtom } מ'../TodoStore';
   יְבוּא { useAtom } מ'ג'וטאי';

2. צור את הרכיב הפונקציונלי והוסף את רכיבי JSX.

   const Todo = () => {
   
   לַחֲזוֹר (
   
   
    מציין מיקום="מטלה חדשה"
    value={value}
    onChange={event => setValue (event.target.value)}
    />
   הוסף Todo</button>
   
   
    {todos.map(לעשות => (
   
   
    {todo.text}
    handleDelete (todo.id)}>מחק</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };