Che cos'è React Redux e come si usa?

Redux è una libreria di gestione dello stato gratuita che funziona sul front-end delle applicazioni JavaScript, gestendo lo stato di ciascun componente all'interno di un'interfaccia utente. La libreria Redux facilita la separazione tra il codice che gestisce e archivia i dati in un'applicazione e il codice che gestisce gli eventi e i loro effetti sui vari componenti dell'interfaccia utente di un'applicazione.

Uno dei principali punti di forza di Redux è che è flessibile. Puoi usare Redux con quasi tutti i framework o librerie JavaScript.

Il team Redux ha creato tre librerie, vale a dire Redux, React-Redux e Redux Toolkit. Tutte e tre le librerie lavorano insieme per darti il ​​massimo dalla tua esperienza di sviluppo di React e in questo articolo tutorial imparerai come usarle.

L'importanza di React-Redux

Sebbene Redux sia una libreria di gestione dello stato indipendente, il suo utilizzo con qualsiasi framework o libreria front-end richiede una libreria di associazione dell'interfaccia utente. Una libreria di associazione dell'interfaccia utente gestisce la logica di interazione del contenitore di stato (o negozio), che è un insieme di passaggi predefiniti che collega un framework front-end alla libreria Redux.

React-Redux è la libreria ufficiale di associazione dell'interfaccia utente di Redux per le applicazioni React ed è gestita dal team Redux.

Imparentato: Come creare la tua prima app React con JavaScript

Installazione di Redux nella directory del tuo progetto

Esistono due modi per accedere alla libreria Redux nella tua applicazione React. L'approccio consigliato dal team Redux consiste nell'utilizzare il seguente comando durante la creazione di un nuovo progetto React:

npx create-react-app mia-app --template redux

Il comando sopra configura automaticamente Redux Toolkit, React-Redux e Redux Store. Tuttavia, se desideri utilizzare Redux in un progetto React esistente, puoi semplicemente installare la libreria Redux come dipendenza con il seguente comando:

npm install redux

Seguito dalla libreria dell'interfaccia utente di associazione React-Redux:

npm install react-redux

E il toolkit Redux:

npm install @reduxjs/toolkit

La libreria Redux Toolkit è importante anche perché rende il processo di configurazione del negozio Redux facile e veloce.

Creazione di un negozio Redux

Prima di poter iniziare a lavorare con la libreria Redux, dovrai creare un contenitore di stato Redux (o negozio). La creazione di un archivio Redux è necessaria perché è l'oggetto che archivia lo stato dell'applicazione Redux globale.

React, come la maggior parte dei framework front-end, ha un punto di ingresso nelle sue applicazioni, che è un file o un gruppo di file al livello superiore. Il index.html e index.js i file sono due file che si trovano al livello più alto di un'app React, che è sopra il App.js file e tutti i componenti nell'app.

Così il index.js file è il luogo ideale per creare un negozio Redux.

Aggiornamento di index.js con il Redux Store

import Reagisci da 'reagisci'
importa ReactDOM da 'react-dom'
importa l'app da './App'
importa reportWebVitals da "./reportWebVitals"
importa {configureStore} da "@reduxjs/toolkit"
import { Provider } da 'react-redux'
importa utente da './reducers/user'
const store = configureStore({
 riduttore:{
 utente
 }
})
ReactDOM.render(




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

C'è molto da decomprimere nel codice sopra, ma il miglior punto di partenza è con il configureStore funzione. Immediatamente inizierai a vedere i vantaggi dell'installazione della libreria Redux Toolkit come configureStore La funzione crea il negozio Redux con solo tre righe di codice.

La tua applicazione React non saprebbe che il negozio Redux esiste senza il componente fornitore, che proviene dalla libreria di associazione React-Redux. Il componente provider prende un singolo prop (lo store) e si avvolge intorno all'app React, rendendo lo store Redux accessibile a livello globale.

La terza e ultima nuova importazione nel index.js il file sopra è il riduttore utente, che è di vitale importanza per il funzionamento del tuo negozio Redux.

Perché è importante un riduttore?

Lo scopo di un riduttore è quello di cambiare a Stato del componente dell'interfaccia utente basato su a azione eseguita. Ad esempio, se stai creando un'applicazione scolastica online, dovrai richiedere che ogni utente acceda all'applicazione per ottenere l'accesso utilizzando un componente di accesso. Un altro ottimo componente per questa applicazione è un componente utente attivo, che visualizzerà il nome o l'indirizzo e-mail di ciascun utente quando accedono alla tua applicazione.

Nell'esempio sopra, il componente utente attivo cambierà ogni volta che un utente esegue l'azione di accesso al proprio account. Questo esempio è quindi una situazione ideale per un riduttore. È anche importante ricordare che un riduttore può svolgere la sua funzione solo grazie al Redux negozio che gli dà accesso allo stato di qualsiasi componente e all'azione di cui ha bisogno per eseguirne il doveri.

Creazione del riduttore utente

import { createSlice } da "@reduxjs/toolkit";
export const userSlice = createSlice({
 nome: "utente",
 statoiniziale: { valore: {email: ""}},
 riduttori: {
 login: (stato, azione) => {
 stato.valore = azione.carico utile
 },
 }
})
export const {login} = userSlice.actions
esporta userSlice.reducer predefinito;

All'interno di React srcdirectory puoi creare un directory del riduttore,che è dove conserverai il tuo riduttore utente e qualsiasi altro riduttore che desideri aggiungere al tuo negozio Redux. Il utente.js il file sopra importa il createSlice funzione dal Redux Toolkit.

Il createSlice la funzione accetta a nome, un stato iniziale, e a oggetto riduttore che memorizza più funzioni del riduttore. Tuttavia, l'oggetto reducers sopra ha solo una funzione reducer chiamata Accedere che accetta uno stato e un'azione come argomenti e restituisce un nuovo stato.

Il file user.js esporta il riduttore di accesso. Il componente di accesso lo importa e lo utilizza nel useDispatch() gancio.

Creazione del componente di accesso

import Reagire da 'reagire';
import Link da '@mui/material/Link';
importa TextField da '@mui/material/TextField';
importa tipografia da '@mui/material/Typography';
import { Button, Box } da '@mui/material';
import { useDispatch } from 'react-redux';
import { login } from '../reducers/user';
import { useState } from 'react';
funzione Accesso() {
 const spedizione = useDispatch()
 const [email, setEmail] = useState('')
 const handleSubmit = () => {
 spedizione (login({email: email}))
 }
Restituzione (


sx={{
mio: 8,
display: 'flessibile',
flexDirection: 'colonna',
alignItems: 'center',
}}>
 Registrazione 
label="Indirizzo e-mail"
necessario
ID = "e-mail"
nome = "e-mail"
margine = "normale"
onChange={(e) => setEmail (e.target.value)}
/>
etichetta = "Password"
necessario
id="password"
nome="password"
tipo="password"
margine = "normale"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
dimenticare la password?

variante="contenuto"
sx={{mt: 2}}
onClick={handleSubmit}
>
Registrazione





);
}
esportare l'accesso predefinito;

Il componente di accesso sopra utilizza la libreria MUI. Crea un semplice modulo di accesso che richiede l'e-mail e la password di un utente. Facendo clic sul pulsante di accesso si attiverà un funzione onClick, che chiamerà il handleSubmit funzione.

Il handleSubmit la funzione utilizza il useState() e useDispact() ganci insieme al riduttore di accesso per rendere disponibile l'indirizzo e-mail di un utente attivo nel negozio Redux. Dal negozio Redux, ogni componente nell'app React ora ha accesso all'e-mail di un utente attivo.

Imparentato: Hooks: L'eroe di React Il seguente componente utente attivo recupera l'indirizzo e-mail di un utente attivo con l'aiuto del useSelector() gancio e lo rende nell'interfaccia utente dell'app.

Il file ActiveUser.js

import React da "react";
import { useSelector } da "react-redux";
function UtentiAttivi() {
 const user = useSelector((state) => state.user.value)
 Restituzione (


Utenti attivi

 {utente.email} 




 );
}

Il file App.js aggiornato

Dai un'occhiata a questo bit di codice:

import React da "react"; importa ActiveUsers da "./components/ActiveUsers"; import Signin da "./components/Signin";
funzione App() {
Restituzione ( 
);
}
esporta l'app predefinita; 

Il App.js il file sopra mostra sia gli utenti attivi che i componenti di accesso nella tua applicazione React creando il seguente output nel tuo browser:

Se un utente accede all'applicazione, il componente degli utenti attivi si aggiornerà immediatamente con un nuovo messaggio di posta elettronica dell'utente attivo.

L'interfaccia utente aggiornata

Quando dovresti usare Redux?

Redux è una delle librerie di gestione dello stato più popolari, principalmente perché svolge un ottimo lavoro nel creare codice prevedibile e affidabile. Se molti componenti di un'applicazione utilizzano lo stesso stato dell'applicazione, Redux è la scelta ideale.

Utilizzando l'esempio della scuola sopra, il componente di accesso, il componente utente attivo, il partecipante alla classe componente, e anche un componente del profilo avrà bisogno dell'indirizzo e-mail di un utente (o qualche altro univoco identificatore). Questo è il motivo per cui Redux è l'opzione migliore qui.

Tuttavia, se hai uno stato che viene utilizzato solo da uno o due componenti al massimo, un'opzione migliore potrebbe essere React props.

Come utilizzare gli oggetti di scena in ReactJS

Se stai cercando suggerimenti su come utilizzare gli oggetti di scena in ReactJS, sei nel posto giusto.

Leggi Avanti

Circa l'autore