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

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

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

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

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

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

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

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

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

   npx create-next-app@latest next-redux-toolkit

2. לאחר יצירת הפרויקט, נווט אל ספריית הפרויקט על ידי הפעלת:

   cd next-redux-toolkit

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

   npm התקן את @reduxjs/toolkit react-redux

לאחר שתגדיר פרויקט Next.js בסיסי, אתה מוכן כעת לבנות אפליקציית Next.js הדגמה המשתמשת Redux Toolkit לניהול מצב.

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

הגדר את חנות Redux

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

כדי לבנות חנות Redux, צור חנות חדשה redux תיקיה בספריית השורש של פרויקט Next.js שלך. בתוך תיקיה זו, צור חדש store.js קובץ והוסיפו את הקוד הבא:

יְבוּא {configureStore} מ'@reduxjs/ערכת כלים';
יְבוּא פרופיל מפחית מ'./reducers/profileSlice';
יְצוּאבְּרִירַת מֶחדָל configureStore({
 מפחית:{
 פרופיל: profileReducer
 }
})

הקוד לעיל משתמש configureStore פונקציה ליצור ולהגדיר את חנות Redux. תצורת החנות כוללת ציון מפחיתים באמצעות מפחית לְהִתְנַגֵד.

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

על ידי הגדרת חנות Redux, הקוד קובע את מבנה הליבה לניהול מצב האפליקציה באמצעות Redux Toolkit.

הגדר פרוסות מדינה

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

בתוך ה redux ספרייה, צור תיקיה חדשה ושמה לה מצמצמים. בתוך תיקיה זו, צור profileSlice.js קובץ, והוסיפו את הקוד הבא.

יְבוּא {createSlice} מ'@reduxjs/ערכת כלים';
const profileSlice = createSlice({
 שֵׁם: 'פּרוֹפִיל',
 מצב התחלתי: {
 שֵׁם: 'אף אחד'
 },
 מפחיתים: {
 SET_NAME: (מדינה, פעולה) => {
 state.name = action.payload
 }
}})
יְצוּאconst {SET_NAME} = profileSlice.actions;
יְצוּאבְּרִירַת מֶחדָל profileSlice.reducer;

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

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

ה createSlice הפונקציה מייצרת יוצרי פעולות וסוגי פעולות באופן אוטומטי בהתבסס על המפחיתים המוגדרים. המיוצא SET_NAME יוצר פעולה ו profileSlice.reducer מייצג את יוצר הפעולה שנוצר ואת פונקציית המפחית עבור פרוסת הפרופיל.

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

צור רכיב לבדיקת פונקציונליות ניהול המצב של RTK

פתח את ה index.js קובץ ב- דפים ספרייה, מחק את קוד Next.js של boilerplate, והוסף את הקוד הבא.

יְבוּא סגנונות מ'@/styles/Home.module.css'
יְבוּא {useRef} מ'לְהָגִיב'
יְבוּא {useSelector, useDispatch} מ'react-redux'
יְבוּא {SET_NAME} מ'../../redux/reducers/profileSlice'
פוּנקצִיָההצג שם(){
const {name} = useSelector((מדינה) => state.profile)
לַחֲזוֹר (

 אני {name} !!</h1> 
 ) }
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהבית() {
const inputName = useRef()
const dispatch = useDispatch()
פוּנקצִיָהsubmitName() {
לְנַחֵם‎.log (inputName.current.value)
 שיגור (SET_NAME(inputName.current.value))
 }
לַחֲזוֹר (
 <>

'הכנס שם' ref={inputName} />
הזן שם</button>

 </main>
 </>
 )}

הקוד שלמעלה יוצר ומעבד רכיב Next.js המאפשר למשתמש להזין שם ולהציג את השם שסופק בדף הדפדפן. ביעילות, ניהול מצב היישום באמצעות Redux Toolkit.

ה הצג שם הרכיב משתמש ב- useSelector וו כדי לגשת ל שֵׁם מאפיין ממצב הפרופיל בחנות Redux ומציג אותו בדף.

כדי להזין שם, משתמש לוחץ על הכנס שם לַחְצָן. זה מעורר את submitName פונקציה, אשר שולחת את SET_NAME פעולה עם ערך הקלט כמטען. פעולה זו מעדכנת את מאפיין השם במצב הפרופיל.

עדכן את קובץ _app.js

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

פתח את ה _app.js קובץ ועדכן אותו באופן הבא:

יְבוּא {ספק} מ'react-redux'
יְבוּא חנות מ'../../redux/store'
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה({ Component, pageProps }) {
לַחֲזוֹר (


 </ספק> )
}

כעת, קדימה, הפעל את שרת הפיתוח כדי לשקף את השינויים שביצעת, ונווט אל http://localhost: 3000 בדפדפן שלך כדי לבדוק את האפליקציה.

npm run dev

טיפול בריידציית נתונים בטעינת עמוד מחדש

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

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

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

אחד היתרונות של שימוש ב- Redux Toolkit ביישומי Next.js הוא הפשטות והתכונות הידידותיות למפתחים. זה מקטין באופן משמעותי את קוד ה-boilerplate הנדרש להגדרת פעולות, מפחיתים ותצורת חנות, מה שמקל ויעיל יותר לעבוד עם Redux בניהול המדינה.