Ի՞նչ է React Redux-ը և ինչպես եք այն օգտագործում:

Կառավարեք React վիճակը հեշտությամբ՝ օգտագործելով Redux-ը: Պատրա՞ստ եք սկսել: Ահա թե ինչպես.

Redux-ը պետական կառավարման անվճար գրադարան է, որն աշխատում է JavaScript հավելվածների ճակատային մասում՝ կառավարելով UI-ի յուրաքանչյուր բաղադրիչի վիճակը: Redux գրադարանը հեշտացնում է կոդի բաժանումը, որը կառավարում և պահում է տվյալներ հավելվածում, և կոդի միջև, որը կառավարում է իրադարձությունները և դրանց ազդեցությունը հավելվածի միջերեսի տարբեր բաղադրիչների վրա:

Redux-ի վաճառքի հիմնական կետերից մեկն այն է, որ այն ճկուն է: Դուք կարող եք օգտագործել Redux-ը գրեթե ցանկացած JavaScript շրջանակի կամ գրադարանի հետ:

Redux թիմը ստեղծել է երեք գրադարան՝ Redux, React-Redux և Redux Toolkit: Բոլոր երեք գրադարաններն աշխատում են միասին, որպեսզի առավելագույնս օգուտ քաղեն React-ի մշակման փորձից, և այս ձեռնարկի հոդվածում դուք կսովորեք, թե ինչպես օգտագործել դրանք:

React-Redux-ի կարևորությունը

Չնայած Redux-ը պետական կառավարման անկախ գրադարան է, այն օգտագործելը ցանկացած առջևի շրջանակի կամ գրադարանի հետ պահանջում է UI պարտադիր գրադարան: UI-ի պարտադիր գրադարանը կարգավորում է վիճակի կոնտեյների (կամ պահեստի) փոխազդեցության տրամաբանությունը, որը նախապես սահմանված քայլերի մի շարք է, որը կապում է առջևի շրջանակը Redux գրադարանին:

React-Redux-ը պաշտոնական Redux UI պարտադիր գրադարանն է React հավելվածների համար, և այն պահպանվում է Redux թիմի կողմից:

Redux-ի տեղադրում ձեր նախագծի գրացուցակում

Ձեր React հավելվածում Redux գրադարան մուտք գործելու երկու եղանակ կա: Redux թիմի առաջարկած մոտեցումն է օգտագործել հետևյալ հրամանը նոր React նախագիծ ստեղծելիս.

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

Վերևի հրամանը ավտոմատ կերպով կարգավորում է Redux Toolkit, React-Redux և Redux խանութը: Այնուամենայնիվ, եթե ցանկանում եք օգտագործել Redux-ը գոյություն ունեցող React նախագծում, ապա կարող եք պարզապես տեղադրել Redux գրադարանը որպես կախվածություն հետևյալ հրամանով.

npm install redux

Հետևում է React-Redux պարտադիր UI գրադարանը.

npm install react-redux

Իսկ Redux գործիքակազմը.

npm install @reduxjs/toolkit

Redux Toolkit գրադարանը նույնպես կարևոր է, քանի որ այն արագ և հեշտ է դարձնում Redux խանութի կազմաձևման գործընթացը:

Redux խանութի ստեղծում

Նախքան Redux գրադարանի հետ աշխատելը սկսելը, դուք պետք է ստեղծեք Redux պետական կոնտեյներ (կամ պահեստ): Redux խանութի ստեղծումն անհրաժեշտ է, քանի որ դա այն օբյեկտն է, որը պահպանում է համաշխարհային Redux հավելվածի վիճակը:

React-ը, ինչպես առջևի շրջանակների մեծ մասը, իր հավելվածներում ունի մուտքի կետ, որը վերին մակարդակի ֆայլ կամ ֆայլերի խումբ է: index.html և index.js ֆայլերը երկու ֆայլեր են, որոնք գտնվում են React հավելվածի վերին մակարդակում, որը գտնվում է App.js վերևում։ > ֆայլը և հավելվածի բոլոր բաղադրիչները:

Այսպիսով, index.js ֆայլը իդեալական վայր է Redux խանութ ստեղծելու համար:

index.js-ի թարմացում Redux Store-ի միջոցով

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import reportWebVitals from "./reportWebVitals"
import {configureStore} from "@reduxjs/toolkit"
import { Provider } from 'react-redux'
import user from './reducers/user'
const store = configureStore({
 reducer:{
   user
 }
})
ReactDOM.render(
 <React.StrictMode>
   <Provider store={store}>
     <App />
   </Provider>
 </React.StrictMode>,
 document.getElementById('root')
)
reportWebVitals();

Վերևի կոդի մեջ բացելու շատ բան կա, բայց սկսելու լավագույն տեղը configureStore ֆունկցիան է: Անմիջապես դուք կսկսեք տեսնել Redux Toolkit գրադարանի տեղադրման առավելությունները, քանի որ configureStore ֆունկցիան ստեղծում է Redux խանութը ընդամենը երեք տող կոդով:

Ձեր React հավելվածը չի իմանա, որ Redux խանութը գոյություն ունի առանց մատակարար բաղադրիչի, որը գալիս է React-Redux պարտադիր գրադարանից: Մատակարարի բաղադրիչը վերցնում է մեկ հենարան (խանութը) և փաթաթվում React հավելվածի շուրջ՝ Redux խանութը դարձնելով գլոբալ հասանելի:

Երրորդ և վերջին նոր ներմուծումը վերևում գտնվող index.js ֆայլում օգտագործողի կրճատիչն է, որը կենսական նշանակություն ունի ձեր Redux խանութի աշխատանքի համար:

Ինչու է ռեդուկտորը կարևոր:

Կրճատողի նպատակն է փոխել UI բաղադրիչի վիճակըհիմնված կատարված գործողության վրա: Օրինակ, եթե դուք առցանց դպրոցական հավելված եք ստեղծում, ձեզանից կպահանջվի, որ յուրաքանչյուր օգտատեր մուտք գործի հավելված՝ մուտք գործելու միջոցով մուտք գործելու համար: Այս հավելվածի մեկ այլ հիանալի բաղադրիչ է ակտիվ օգտվողի բաղադրիչը, որը կցուցադրի յուրաքանչյուր օգտվողի անունը կամ էլփոստի հասցեն, երբ նրանք մուտք գործեն ձեր հավելված:

Վերոնշյալ օրինակում ակտիվ օգտատիրոջ բաղադրիչը կփոխվի ամեն անգամ, երբ օգտատերը կատարում է իր հաշիվ մուտք գործելու գործողությունը: Այս օրինակը, հետևաբար, իդեալական իրավիճակ է կրճատողի համար: Կարևոր է նաև հիշել, որ ռեդուկտորը կարող է կատարել իր գործառույթը միայն Redux խանութի շնորհիվ, որը նրան հնարավորություն է տալիս մուտք գործել ցանկացած բաղադրիչի վիճակի և իր պարտականությունները կատարելու համար անհրաժեշտ գործողության:

Օգտագործողի կրճատիչի ստեղծում

import { createSlice } from "@reduxjs/toolkit";
export const userSlice = createSlice({
   name: "user",
   initialState: { value: {email: ""}},
   reducers: {
       login: (state, action) => {
               state.value = action.payload
       },
   }
})
export const {login} = userSlice.actions
export default userSlice.reducer;

React-ի src գրացուցակում դուք կարող եք ստեղծել կրճատող գրացուցակ, որտեղ դուք կպահեք ձեր օգտագործողի կրճատիչև ցանկացած այլ կրճատիչ, որը ցանկանում եք ավելացնել ձեր Redux խանութում: Վերևում գտնվող user.js ֆայլը ներմուծում է createSlice ֆունկցիան Redux Toolkit-ից:

createSlice ֆունկցիան ընդունում է անուն, սկզբնական վիճակ և կրճատող օբյեկտ, որը պահպանում է մի քանի կրճատիչ գործառույթներ: Այնուամենայնիվ, վերևում գտնվող ռեդուկտորների օբյեկտն ունի միայն մեկ կրճատիչ ֆունկցիա, որը կոչվում է մուտք, որը ընդունում է վիճակը և գործողությունը որպես արգումենտ և վերադարձնում է նոր վիճակ:

User.js ֆայլը արտահանում է մուտքի կրճատիչը: Մուտքի բաղադրիչը ներմուծում է այն և օգտագործում այն useDispatch() կեռում:

Մուտքագրման բաղադրիչի ստեղծում

import React from 'react';
import Link from '@mui/material/Link';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { Button, Box } from '@mui/material';
import { useDispatch } from 'react-redux';
import { login } from '../reducers/user';
import { useState } from 'react';
function Signin() {
   const dispatch = useDispatch()
   const [email, setEmail] = useState('')
   const handleSubmit = () => {
       dispatch(login({email: email}))
   }
  
return (
<div>
<Box
sx={{
my: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}>
<Typography variant="h4"> Sign In </Typography>
<TextField
label="Email Address"
required
id="email"
name="email"
margin="normal"
onChange={(e) => setEmail(e.target.value)}
/>
<TextField
label="Password"
required
id="password"
name="password"
type="password"
margin="normal"
/>
<Link
href="#"
sx={{mr: 12, mb: 2}}
>
forget password?
</Link>
<Button
variant="contained"
sx={{mt: 2}}
onClick={handleSubmit}
>
Sign In
</Button>
</Box>
</div>
);
}
export default Signin;

Վերևում մուտքի բաղադրիչն օգտագործում է MUI գրադարանը: Այն ստեղծում է մուտքի պարզ ձև, որը պահանջում է օգտվողի էլ.փոստ և գաղտնաբառը: Մուտք գործելու կոճակը սեղմելով՝ կգործարկվի onClick ֆունկցիան, որը կկանչի handleSubmit գործառույթը:

handleSubmit ֆունկցիան օգտագործում է useState() և useDispact() կեռիկներն ու մուտքի կրճատիչը ակտիվացնելու համար: օգտագործողի էլ.փոստի հասցեն հասանելի է Redux խանութում: Redux խանութից React հավելվածի յուրաքանչյուր բաղադրիչ այժմ հասանելի է ակտիվ օգտատիրոջ էլ.

ActiveUser.js ֆայլը

import React from "react";
import { useSelector } from "react-redux";

function ActiveUsers() {
   const user = useSelector((state) => state.user.value)
   return (
       <div>
           <h2>Active Users</h2>
           <p> {user.email} </p>
       </div>
   );
}

Թարմացված App.js ֆայլը

Նայեք այս կոդին.

import React from "react"; import ActiveUsers from "./components/ActiveUsers"; import Signin from "./components/Signin";
function App() {
return ( <div> <ActiveUsers/> <Signin/> </div>
);
}
export default App; 

Վերևում գտնվող App.js ֆայլը ներկայացնում է և՛ ակտիվ օգտատերերին, և՛ մուտքի բաղադրիչները ձեր React հավելվածում՝ ստեղծելով հետևյալ ելքը ձեր դիտարկիչում.

Եթե օգտատերը մուտք գործի հավելված, ակտիվ օգտվողների բաղադրիչն անմիջապես կթարմացվի նոր ակտիվ օգտվողի էլ.փոստով:

Թարմացված միջերեսը

Ե՞րբ պետք է օգտագործեք Redux-ը:

Redux-ը պետական կառավարման ամենահայտնի գրադարաններից է, հիմնականում այն պատճառով, որ այն հիանալի աշխատանք է կատարում կանխատեսելի և հուսալի կոդ ստեղծելու գործում: Եթե հավելվածում շատ բաղադրիչներ օգտագործում են կիրառման նույն վիճակը, Redux-ը իդեալական ընտրություն է:

Օգտագործելով վերը նշված դպրոցի օրինակը՝ մուտքի բաղադրիչը, ակտիվ օգտատիրոջ բաղադրիչը, դասի մասնակցի բաղադրիչը և նույնիսկ պրոֆիլի բաղադրիչը պետք է օգտագործողի էլ.փոստի հասցեն (կամ որևէ այլ եզակի նույնացուցիչ): Ահա թե ինչու Redux-ն այստեղ լավագույն տարբերակն է:

Այնուամենայնիվ, եթե դուք ունեք մի վիճակ, որն օգտագործվում է առավելագույնը մեկ կամ երկու բաղադրիչի կողմից, ապա ավելի լավ տարբերակ կարող է լինել React-ը: