Il useReducer Hook: semplificare la gestione dello stato in React

Dec 18, 2023

UseReducer Hook è una delle migliori opzioni per la gestione dello stato in React. Inizia il tuo viaggio con il gancio useReducer utilizzando questa guida.

La gestione dello stato è cruciale nello sviluppo di React, poiché funge da pietra angolare per la gestione e l'aggiornamento dei dati nelle interfacce utente. ReagireuseState Hook fornisce un approccio semplice per gestire lo stato, ma diventa complicato con stati complessi. È lì cheutilizzareReducerEntra Gancio.

ILutilizzareReducer Hook offre una metodologia strutturata per la gestione di stati e transizioni complessi. Abbracciando ilutilizzareReducerHook sblocca flessibilità ed efficienza, portando a un codice più pulito.

ILutilizzareReducer Hook è una funzionalità integrata fornita da React che semplifica la gestione dello stato aderendo ai principi del modello di riduzione. Ti offre un'alternativa organizzata e scalabile aluseStateHook, particolarmente adatto per la gestione di stati complessi.

Sfruttando ilutilizzareReducerHook, puoi consolidare sia lo stato che le sue transizioni all'interno di un'unica funzione riduttore.

Questa funzione prende lo stato corrente e un'azione come input, producendo successivamente il nuovo stato. Funziona secondo gli stessi principi della funzione riduttore impiegata in JavaScriptArray.prototype.reduce()metodo.

La sintassi per utilizzare il fileutilizzareReducerIl gancio è il seguente:

ILutilizzareReducerla funzione accetta due argomenti:

All'invocazione, ilutilizzareReducerHook restituisce un array composto da due elementi:

Considera l'esempio seguente che illustra l'uso diutilizzareReducerAggancio alla gestione di un semplice contatore:

Dall'illustrazione sopra, uno stato iniziale di0è definito insieme ad una funzione riduttore responsabile della gestione di due tipi di azioni:incrementoEdecremento . La funzione riduttore modifica opportunamente lo stato in base alle azioni specificate.

Sfruttando ilutilizzareReducer Hook, lo stato viene inizializzato e vengono acquisiti sia il valore dello stato corrente che la funzione di invio. La funzione di invio viene successivamente utilizzata per attivare gli aggiornamenti di stato facendo clic sui rispettivi pulsanti.

Per un utilizzo ottimale delutilizzareReducer Hook, puoi creare una funzione di riduzione che descrive come lo stato dovrebbe essere aggiornato in base alle azioni inviate. Questa funzione di riduzione accetta lo stato corrente e l'azione come argomenti e restituisce il nuovo stato.

Tipicamente, una funzione reducer impiega un'istruzione condizionale switch per gestire vari tipi di azioni ed effettuare di conseguenza le modifiche dello stato.

Considera l'esempio seguente di una funzione di riduzione utilizzata per gestire un elenco di cose da fare:

Nell'esempio precedente, la funzione di riduzione gestisce tre tipi di azioni distinte:aggiungere,attivare/disattivare, Eeliminare . Dopo aver ricevuto ilaggiungereazione, aggiunge il payload (un nuovo elemento da fare) al filestatovettore.

Nel caso delattivare/disattivareazione, alterna ilcompletato proprietà dell'elemento da fare associato all'ID specificato. ILeliminareaction, invece, elimina dall'array di stato la voce todo collegata all'ID fornito.

Se nessuno dei tipi di azione corrisponde, la funzione riduttore restituisce lo stato corrente inalterato.

Per effettuare gli aggiornamenti statali agevolati dall'utilizzareReducer Hook, il dispacciamento delle azioni diventa indispensabile. Le azioni rappresentano semplici oggetti JavaScript che chiariscono il tipo desiderato di modifica dello stato.

La responsabilità di gestire queste azioni e generare lo stato successivo spetta alla funzione riduttore.

La funzione di spedizione, fornita dautilizzareReducer