Какво е React Redux и как го използвате?

Redux е безплатна библиотека за управление на състоянието, която работи в предния край на JavaScript приложенията, управлявайки състоянието на всеки компонент в потребителския интерфейс. Библиотеката Redux улеснява разделянето между код, който управлява и съхранява данни в приложение, и код, който управлява събития и тяхното въздействие върху различните компоненти на потребителския интерфейс на приложението.

Една от основните точки за продажба на Redux е, че е гъвкав. Можете да използвате Redux с почти всяка JavaScript рамка или библиотека.

Екипът на Redux създаде три библиотеки, а именно Redux, React-Redux и Redux Toolkit. И трите библиотеки работят заедно, за да ви дадат максимума от вашия опит в разработката на React и в тази статия с урок ще научите как да ги използвате.

Значението на React-Redux

Въпреки че Redux е независима библиотека за управление на състоянието, използването й с всяка предна рамка или библиотека изисква библиотека за свързване на потребителския интерфейс. Библиотеката за свързване на потребителски интерфейс обработва логиката на взаимодействие на контейнера (или магазина) на състоянието, която е набор от предварително дефинирани стъпки, които свързват рамка от преден край с библиотеката Redux.

React-Redux е официалната библиотека за свързване на Redux UI за приложения на React и се поддържа от екипа на Redux.

Свързани: Как да създадете първото си приложение за реакция с JavaScript

Инсталиране на Redux във вашия проект директория

Има два начина да получите достъп до библиотеката Redux във вашето приложение React. Препоръчителният подход от екипа на Redux е да използвате следната команда, когато създавате нов React проект:

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

Командата по-горе автоматично конфигурира Redux Toolkit, React-Redux и Redux store. Ако обаче искате да използвате Redux в съществуващ React проект, тогава можете просто да инсталирате библиотеката Redux като зависимост със следната команда:

npm инсталирайте redux

Следва библиотеката на React-Redux binding UI:

npm инсталирайте react-redux

И инструментариумът Redux:

npm инсталирайте @reduxjs/toolkit

Библиотеката Redux Toolkit също е важна, защото прави процеса на конфигуриране на Redux store бърз и лесен.

Създаване на Redux Store

Преди да можете да започнете да работите с библиотеката Redux, ще трябва да създадете контейнер за състояние на Redux (или магазин). Създаването на магазин Redux е необходимо, защото това е обектът, който съхранява глобалното състояние на приложението Redux.

React, подобно на повечето front-end рамки, има входна точка в своите приложения, която е файл или група файлове на най-високо ниво. В index.html и index.js файловете са два файла, които са на най-горното ниво на приложение React, което е над App.js файл и всички компоненти в приложението.

Така че index.js file е идеалното място за създаване на магазин Redux.

Актуализиране на index.js с Redux Store

импортиране на React от 'react'
импортирайте ReactDOM от 'react-dom'
импортирайте приложение от './App'
импортирайте reportWebVitals от "./reportWebVitals"
импортирайте {configureStore} от „@reduxjs/toolkit“
импортирайте { Provider } от 'react-redux'
импортирайте потребител от './reducers/user'
const store = configureStore({
 редуктор:{
 потребител
 }
})
ReactDOM.render(




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

Има много неща за разопаковане в кода по-горе, но най-доброто място да започнете е с configureStore функция. Веднага ще започнете да виждате ползите от инсталирането на библиотеката Redux Toolkit като configureStore функцията създава магазина Redux само с три реда код.

Вашето приложение React няма да знае, че магазинът Redux съществува без компонент на доставчика, който идва от библиотеката за свързване на React-Redux. Компонентът на доставчика взема един реквизит (магазина) и се обвива около приложението React, което прави магазина Redux глобално достъпен.

Третият и последен нов внос в index.js файлът по-горе е потребителски редуктор, което е жизненоважно за работата на вашия магазин Redux.

Защо редукторът е важен?

Целта на редуктора е да промени a Състояние на компонента на потребителския интерфейс въз основа на а извършено действие. Например, ако създавате приложение за онлайн училище, ще изисквате всеки потребител да влезе в приложението, за да получи достъп с помощта на компонент за вход. Друг страхотен компонент за това приложение е активен потребителски компонент, който ще показва името или имейл адреса на всеки потребител, когато влезе във вашето приложение.

В примера по-горе активният потребителски компонент ще се променя всеки път, когато потребителят извърши действието по влизане в акаунта си. Следователно този пример е идеална ситуация за редуктор. Също така е важно да запомните, че редукторът може да изпълнява своята функция само поради Redux магазин, който му дава достъп до състоянието на всеки компонент и действието, от което се нуждае, за да извърши задължения.

Създаване на потребителския редуктор

импортирайте { createSlice } от "@reduxjs/toolkit";
експортиране const userSlice = createSlice({
 име: "потребител",
 initialState: { стойност: {email: ""}},
 редуктори: {
 вход: (състояние, действие) => {
 състояние.стойност = действие.полезен товар
 },
 }
})
експортиране const {login} = userSlice.actions
експортиране по подразбиране userSlice.reducer;

В рамките на React srcдиректория можете да създадете a редуктор директория, където ще съхранявате вашите потребителски редуктор и всеки друг редуктор, който искате да добавите към вашия магазин Redux. В user.js файл по-горе импортира createSlice функция от Redux Toolkit.

В createSlice функцията приема a име, ан Първоначално състояние, и а обект редуктор който съхранява множество функции на редуктор. Въпреки това, обектът редуктор по-горе има само една извикана функция редуктор Влизане който приема състояние и действие като аргументи и връща ново състояние.

Файлът user.js експортира редуктор за влизане. Компонентът за вход го импортира и го използва в useDispatch() кука.

Създаване на компонента за вход

импортиране на React от 'react';
импортирайте връзка от '@mui/material/Link';
импортирайте TextField от '@mui/material/TextField';
импортирайте типография от '@mui/material/Typography';
импортирайте { Button, Box } от '@mui/material';
import { useDispatch } от 'react-redux';
import { login } от '../reducers/user';
import { useState } от 'react';
функция Вход() {
 const dispatch = useDispatch()
 const [имейл, setEmail] = useState('')
 const handleSubmit = () => {
 изпращане (вход ({email: email}))
 }
връщане (


sx={{
моите: 8,
дисплей: 'flex',
flexDirection: 'колона',
alignItems: 'center',
}}>
 Впиши се 
label="Имейл адрес"
задължително
id="имейл"
име = "имейл"
margin="normal"
onChange={(e) => setEmail (e.target.value)}
/>
етикет = "Парола"
задължително
id="парола"
име = "парола"
type="password"
margin="normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
Забравена парола?

вариант = "съдържа се"
sx={{mt: 2}}
onClick={handleSubmit}
>
Впиши се





);
}
експортиране по подразбиране Вход;

Компонентът за вход по-горе използва библиотеката на MUI. Той създава проста форма за влизане, която изисква имейл и парола на потребителя. Щракването върху бутона за вход ще задейства функция onClick, който ще извика handleSubmit функция.

В handleSubmit функцията използва useState() и useDispact() куки заедно с редуктор за влизане за да направите имейл адреса на активен потребител наличен в магазина Redux. От магазина Redux всеки компонент в приложението React вече има достъп до имейл на активен потребител.

Свързани: Куки: Героят на React Следният активен потребителски компонент извлича имейл адреса на активен потребител с помощта на useSelector() кука и го изобразява в потребителския интерфейс на приложението.

Файлът ActiveUser.js

импортирайте React от "react";
import { useSelector } от "react-redux";
функция ActiveUsers() {
 const user = useSelector((state) => state.user.value)
 връщане (


Активни потребители

 {user.email} 




 );
}

Актуализираният файл App.js

Разгледайте този къс код:

импортирайте React от "react"; импортирайте ActiveUsers от "./components/ActiveUsers"; импортирайте Вход от "./components/Signin";
функция App() {
връщане ( 
);
}
експортиране на приложение по подразбиране; 

В App.js файлът по-горе изобразява както активните потребители, така и компонентите за влизане във вашето приложение React, създавайки следния изход във вашия браузър:

Ако потребител влезе в приложението, компонентът за активни потребители незабавно ще се актуализира с нов имейл на активен потребител.

Актуализираният потребителски интерфейс

Кога трябва да използвате Redux?

Redux е една от най-популярните библиотеки за управление на състоянието, главно защото върши отлична работа по създаването на предвидим и надежден код. Ако много компоненти в едно приложение използват едно и също състояние на приложението, Redux е идеалният избор.

Използвайки примера за училище по-горе, компонентът за влизане, активен потребителски компонент, участник в класа компонент и дори компонент на профила ще се нуждае от имейл адрес на потребителя (или някакъв друг уникален идентификатор). Ето защо Redux е най-добрият вариант тук.

Въпреки това, ако имате състояние, което се използва само от един или два компонента най-много, тогава по-добър вариант може да бъде React props.

Как да използвате реквизити в ReactJS

Ако търсите съвети как да използвате реквизитите в ReactJS, вие сте на правилното място.

Прочетете Следващото

За автора