Co to jest React Redux i jak go używać?

Redux to bezpłatna biblioteka do zarządzania stanem, która działa na interfejsie aplikacji JavaScript, zarządzając stanem każdego komponentu w interfejsie użytkownika. Biblioteka Redux ułatwia oddzielenie kodu zarządzającego i przechowującego dane w aplikacji od kodu zarządzającego zdarzeniami i ich wpływem na różne składniki interfejsu użytkownika aplikacji.

Jednym z głównych punktów sprzedaży Redux jest to, że jest elastyczny. Możesz używać Redux z prawie każdym frameworkiem lub biblioteką JavaScript.

Zespół Redux stworzył trzy biblioteki, a mianowicie Redux, React-Redux i Redux Toolkit. Wszystkie trzy biblioteki współpracują ze sobą, aby jak najlepiej wykorzystać możliwości programowania w React, a z tego samouczka dowiesz się, jak z nich korzystać.

Znaczenie React-Redux

Chociaż Redux jest niezależną biblioteką zarządzania stanem, używanie jej z dowolną platformą lub biblioteką frontonu wymaga biblioteki powiązań interfejsu użytkownika. Biblioteka powiązań interfejsu użytkownika obsługuje logikę interakcji kontenera stanu (lub magazynu), która jest zestawem wstępnie zdefiniowanych kroków łączących platformę frontonu z biblioteką Redux.

React-Redux to oficjalna biblioteka wiązań Redux UI dla aplikacji React i jest utrzymywana przez zespół Redux.

Związane z: Jak stworzyć swoją pierwszą aplikację React z JavaScript?

Instalowanie Redux w katalogu projektu

Istnieją dwa sposoby uzyskania dostępu do biblioteki Redux w aplikacji React. Rekomendowanym podejściem zespołu Redux jest użycie następującego polecenia podczas tworzenia nowego projektu React:

npx create-react-app moja-aplikacja --template redux

Powyższe polecenie automatycznie konfiguruje Redux Toolkit, React-Redux i sklep Redux. Jeśli jednak chcesz użyć Redux w istniejącym projekcie React, możesz po prostu zainstalować bibliotekę Redux jako zależność za pomocą następującego polecenia:

npm zainstaluj redux

Następnie biblioteka interfejsu użytkownika powiązań React-Redux:

npm zainstaluj react-redux

Oraz zestaw narzędzi Redux:

npm install @reduxjs/toolkit

Biblioteka Redux Toolkit jest również ważna, ponieważ sprawia, że ​​proces konfiguracji sklepu Redux jest szybki i łatwy.

Tworzenie sklepu Redux

Zanim zaczniesz pracować z biblioteką Redux, musisz utworzyć kontener stanu Redux (lub sklep). Utworzenie magazynu Redux jest konieczne, ponieważ jest to obiekt, który przechowuje globalny stan aplikacji Redux.

React, podobnie jak większość front-endowych frameworków, ma punkt wejścia w swoich aplikacjach, którym jest plik lub grupa plików na najwyższym poziomie. ten index.html oraz index.js pliki to dwa pliki znajdujące się na najwyższym poziomie aplikacji React, czyli powyżej App.js plik i wszystkie komponenty w aplikacji.

Więc index.js file to idealne miejsce do stworzenia sklepu Redux.

Aktualizowanie index.js za pomocą sklepu Redux

importuj React z „react”
importuj ReactDOM z 'react-dom'
importuj aplikację z „./App”
importuj reportWebVitals z "./reportWebVitals"
importuj {configureStore} z „@reduxjs/toolkit”
importuj { Provider } z 'react-redux'
importuj użytkownika z './reducers/user'
const store = configureStore({
 reduktor:{
 użytkownik
 }
})
ReactDOM.render(




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

W powyższym kodzie jest wiele rzeczy do rozpakowania, ale najlepiej zacząć od skonfigurować sklep funkcjonować. Natychmiast zaczniesz dostrzegać korzyści płynące z zainstalowania biblioteki Redux Toolkit jako skonfigurować sklep funkcja tworzy sklep Redux za pomocą zaledwie trzech linii kodu.

Twoja aplikacja React nie wiedziałaby, że sklep Redux istnieje bez komponent dostawcy, który pochodzi z biblioteki wiążącej React-Redux. Komponent provider przyjmuje pojedynczą właściwość (sklep) i owija się wokół aplikacji React, dzięki czemu sklep Redux jest dostępny na całym świecie.

Trzeci i ostatni nowy import w index.js plik powyżej to reduktor użytkownika, co jest niezwykle ważne dla działania Twojego sklepu Redux.

Dlaczego reduktor jest ważny?

Celem reduktora jest zmiana a Stan komponentu interfejsu użytkownika na podstawie wykonane działanie. Na przykład, jeśli tworzysz aplikację szkolną online, będziesz wymagać, aby każdy użytkownik zalogował się do aplikacji, aby uzyskać dostęp za pomocą komponentu logowania. Innym świetnym komponentem tej aplikacji jest aktywny komponent użytkownika, który wyświetla nazwę lub adres e-mail każdego użytkownika po zalogowaniu się do Twojej aplikacji.

W powyższym przykładzie aktywny komponent użytkownika zmieni się za każdym razem, gdy użytkownik wykona akcję logowania na swoje konto. Ten przykład jest więc idealną sytuacją dla reduktora. Należy również pamiętać, że reduktor może spełniać swoją funkcję tylko dzięki Redux sklepu, który daje mu dostęp do stanu dowolnego komponentu i działania, którego potrzebuje do jego realizacji obowiązki.

Tworzenie reduktora użytkownika

importuj { createSlice } z "@reduxjs/toolkit";
export const userSlice = createSlice({
 nazwa: "użytkownik",
 InitialState: { value: {email: ""}},
 reduktory: {
 login: (stan, akcja) => {
 state.value = akcja.payload
 },
 }
})
export const {login} = userSlice.actions
eksportuj domyślny userSlice.reducer;

W React srcinformator możesz stworzyć katalog reduktora, gdzie będziesz przechowywać swoje reduktor użytkownika i każdy inny reduktor, który chcesz dodać do swojego sklepu Redux. ten user.js plik powyżej importuje utwórzSlice funkcja z zestawu narzędzi Redux.

ten utwórzSlice funkcja akceptuje a Nazwa, jakiś stan początkowy, i obiekt reduktora który przechowuje wiele funkcji reduktora. Jednak powyższy obiekt reduktorów ma tylko jedną funkcję reduktora o nazwie Zaloguj sie który przyjmuje stan i akcję jako argumenty i zwraca nowy stan.

Plik user.js eksportuje reduktor logowania. Komponent logowania importuje go i używa w użyjWyślij() hak.

Tworzenie komponentu logowania

importuj React z „react”;
importuj link z „@mui/material/Link”;
importuj TextField z „@mui/material/TextField”;
importuj typografię z „@mui/material/Typography”;
importuj { Button, Box } z „@mui/material”;
importuj { useDispatch } z 'react-redux';
importuj { login } z '../reducers/user';
importuj { useState } z 'react';
funkcja Signin() {
 stała wysyłka = useDispatch()
 const [email, setEmail] = useState('')
 const handlePrześlij = () => {
 wysyłka (login({e-mail: e-mail}))
 }
powrót (


sx={{
mój: 8,
wyświetlacz: 'flex',
flexDirection: 'kolumna',
alignItems: 'centrum',
}}>
 Zaloguj 
label="Adres e-mail"
wymagany
id="e-mail"
name="e-mail"
margines="normalny"
onChange={(e) => setEmail (e.target.value)}
/>
label="Hasło"
wymagany
id="hasło"
name="hasło"
type="hasło"
margines="normalny"
/>
href="#"
sx={{pan: 12, mb: 2}}
>
zapomniałeś hasła?

wariant="zawiera"
sx={{mt: 2}}
onClick={handleSubmit}
>
Zaloguj





);
}
eksportuj domyślny login;

Komponent logowania powyżej używa biblioteka MUI. Tworzy prosty formularz logowania, który wymaga adresu e-mail i hasła użytkownika. Kliknięcie przycisku logowania spowoduje uruchomienie Funkcja onClick, który wywoła uchwytWyślij funkcjonować.

ten uchwytWyślij funkcja używa useState() oraz użyjDispact() haczyki wraz z reduktor logowania udostępnienia aktywnego adresu e-mail użytkownika w sklepie Redux. Ze sklepu Redux każdy komponent aplikacji React ma teraz dostęp do poczty e-mail aktywnego użytkownika.

Związane z: Haki: Bohater React Następujący aktywny składnik użytkownika pobiera adres e-mail aktywnego użytkownika za pomocą haczyk useSelector() i renderuje go do interfejsu aplikacji.

Plik ActiveUser.js

importuj React z „react”;
importuj { useSelector } z "react-redux";
funkcja AktywniUżytkownicy() {
 const user = useSelector((state) => state.user.value)
 powrót (


Aktywni użytkownicy

 {użytkownik.e-mail} 




 );
}

Zaktualizowany plik App.js

Spójrz na ten fragment kodu:

importuj React z „react”; importuj ActiveUsers z "./components/ActiveUsers"; importuj logowanie z "./components/Signin";
funkcja App() {
powrót ( 
);
}
eksportuj domyślną aplikację; 

ten App.js powyższy plik renderuje zarówno aktywnych użytkowników, jak i komponenty logowania w aplikacji React, tworząc następujące dane wyjściowe w przeglądarce:

Jeśli użytkownik zaloguje się do aplikacji, składnik aktywnych użytkowników zostanie natychmiast zaktualizowany o nowy adres e-mail aktywnego użytkownika.

Zaktualizowany interfejs użytkownika

Kiedy powinieneś używać Redux?

Redux jest jedną z najpopularniejszych bibliotek do zarządzania stanem, głównie dlatego, że doskonale radzi sobie z tworzeniem przewidywalnego i niezawodnego kodu. Jeśli wiele komponentów w aplikacji korzysta z tego samego stanu aplikacji, Redux jest idealnym wyborem.

Korzystając z powyższego przykładu szkolnego, składnik logowania, składnik aktywnego użytkownika, uczestnik zajęć komponent, a nawet komponent profilu będzie wymagał adresu e-mail użytkownika (lub innego unikalnego identyfikator). Dlatego Redux jest tutaj najlepszą opcją.

Jeśli jednak masz stan, który jest używany tylko przez jeden lub co najwyżej dwa komponenty, lepszą opcją mogą być właściwości React.

Jak używać rekwizytów w ReactJS

Jeśli szukasz wskazówek, jak używać rekwizytów w ReactJS, jesteś we właściwym miejscu.

Czytaj dalej

O autorze