מה זה React Redux וכיצד משתמשים בו?

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

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

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

החשיבות של React-Redux

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

React-Redux היא ספריית Redux UI המחייבת הרשמית ליישומי React, והיא מתוחזקת על ידי צוות Redux.

קָשׁוּר: כיצד ליצור את אפליקציית React הראשונה שלך עם JavaScript

התקנת Redux בספריית הפרויקטים שלך

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

npx create-react-app my-app --template redux

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

npm להתקין redux

ואחריו ספריית ממשק המשתמש המחייב React-Redux:

npm להתקין react-redux

וערכת הכלים של Redux:

npm התקן את @reduxjs/toolkit

ספריית Redux Toolkit חשובה גם מכיוון שהיא הופכת את תהליך תצורת חנות Redux למהיר וקל.

יצירת חנות Redux

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

ל-React, כמו לרוב ה-front-end frameworks, יש נקודת כניסה ביישומים שלה, שהיא קובץ או קבוצת קבצים ברמה העליונה. ה index.html ו index.js קבצים הם שני קבצים שנמצאים ברמה העליונה של אפליקציית React, שנמצאת מעל App.js הקובץ וכל הרכיבים באפליקציה.

אז ה index.js הקובץ הוא המקום האידיאלי ליצירת חנות Redux.

עדכון index.js עם חנות Redux

ייבוא ​​תגובה מ-'react'
ייבוא ​​ReactDOM מ-'react-dom'
ייבוא ​​אפליקציה מ-'./App'
ייבוא ​​reportWebVitals מ-"./reportWebVitals"
יבא את {configureStore} מ-"@reduxjs/toolkit"
יבא את { ספק } מ'react-redux'
יבא משתמש מ-'./reducers/user'
const store = configureStore({
 מפחית:{
 מִשׁתַמֵשׁ
 }
})
ReactDOM.render(




,
 document.getElementById('root')
)
reportWebVitals();

יש הרבה מה לפרוק בקוד שלמעלה, אבל המקום הטוב ביותר להתחיל בו הוא עם configureStore פוּנקצִיָה. מיד תתחיל לראות את היתרונות של התקנת ספריית Redux Toolkit בתור configureStore function יוצרת את חנות Redux עם שלוש שורות קוד בלבד.

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

הייבוא ​​החדש השלישי והאחרון ב- index.js הקובץ למעלה הוא מפחית משתמשים, שהוא חיוני ביותר לתפעול חנות Redux שלך.

מדוע מפחית חשוב?

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

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

יצירת מפחית המשתמשים

ייבוא ​​{ createSlice } מ-"@reduxjs/toolkit";
export const userSlice = createSlice({
 שם: "משתמש",
 initialState: { value: {email: ""}},
 מפחיתים: {
 כניסה: (מצב, פעולה) => {
 state.value = action.payload
 },
 }
})
export const {login} = userSlice.actions
ייצוא ברירת המחדל userSlice.reducer;

בתוך React's srcמַדרִיך אתה יכול ליצור א ספריית מפחיתים,ששם תשמור את שלך מפחית משתמשים וכל מפחית אחר שתרצה להוסיף לחנות Redux שלך. ה user.js הקובץ לעיל מייבא את createSlice פונקציה מ- Redux Toolkit.

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

הקובץ user.js מייצא את מפחית הכניסה. רכיב הכניסה מייבא אותו ומשתמש בו ב- useDispatch() וו.

יצירת רכיב הכניסה

ייבוא ​​תגובה מ-'react';
ייבוא ​​קישור מ-'@mui/material/Link';
יבא את TextField מ'@mui/material/TextField';
ייבוא ​​טיפוגרפיה מ-'@mui/material/Typography';
ייבוא ​​{ Button, Box } מתוך '@mui/material';
ייבוא ​​{ useDispatch } מ-'react-redux';
ייבוא ​​{ login } מ-'../reducers/user';
ייבוא ​​{ useState } מ-'react';
function Signin() {
 const dispatch = useDispatch()
 const [email, setEmail] = useState('')
 const handleSubmit = () => {
 שיגור (כניסה ({email: email}))
 }
לחזור (


sx={{
שלי: 8,
תצוגה: 'flex',
flexDirection: 'עמודה',
alignItems: 'מרכז',
}}>
 להתחבר 
label="כתובת דוא"ל"
נדרש
id="email"
name="email"
margin="normal"
onChange={(e) => setEmail (e.target.value)}
/>
label="סיסמה"
נדרש
id="סיסמה"
name="סיסמה"
type="סיסמה"
margin="normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
לשכוח סיסמה?

variant="contained"
sx={{mt: 2}}
onClick={handleSubmit}
>
להתחבר





);
}
ייצוא ברירת מחדל כניסה;

רכיב הכניסה לעיל משתמש ספריית ה-MUI. זה יוצר טופס כניסה פשוט שדורש אימייל וסיסמה של משתמש. לחיצה על כפתור הכניסה תפעיל פונקציית onClick, אשר יקרא את handleSubmit פוּנקצִיָה.

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

קָשׁוּר: הוקס: הגיבור של React רכיב המשתמש הפעיל הבא מאחזר כתובת דואר אלקטרוני של משתמש פעיל בעזרת ה הוק של useSelector() ומעבד אותו לממשק המשתמש של האפליקציה.

הקובץ ActiveUser.js

ייבוא ​​תגובה מ-"react";
ייבוא ​​{ useSelector } מ-"react-redux";
function ActiveUsers() {
 const user = useSelector((state) => state.user.value)
 לחזור (


משתמשים פעילים

 {user.email} 




 );
}

קובץ App.js המעודכן

תסתכל על קטע הקוד הזה:

ייבוא ​​תגובה מ-"react"; ייבוא ​​ActiveUsers מ-"./components/ActiveUsers"; ייבוא ​​כניסה מ-"./components/Signin";
function App() {
לחזור ( 
);
}
ייצוא אפליקציית ברירת מחדל; 

ה App.js הקובץ שלמעלה מעבד הן את המשתמשים הפעילים והן את רכיבי הכניסה באפליקציית React שלך ויוצר את הפלט הבא בדפדפן שלך:

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

ממשק המשתמש המעודכן

מתי כדאי להשתמש ב- Redux?

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

באמצעות הדוגמה של בית הספר למעלה, רכיב הכניסה, רכיב המשתמש הפעיל, משתתף הכיתה רכיב, ואפילו רכיב פרופיל יצטרך כתובת דוא"ל של משתמש (או ייחודי אחר מזהה). זו הסיבה ש- Redux היא האפשרות הטובה ביותר כאן.

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

כיצד להשתמש באביזרים ב-ReactJS

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

קרא הבא

על הסופר