Un esempio di Hook useReducer – La modifica di uno stato simile a Redux

Introduzione al Hook useReducer, funzionalità simile a Redux per la modifica di uno stato

Il “useReducer” hook è uno strumento di React che consente di gestire lo stato di un componente utilizzando una funzione di tipo reducer, simile a quella utilizzata in Redux. Per utilizzare “useReducer”, è necessario definire una funzione reducer e un oggetto di stato iniziale.

import React, { useReducer } from 'react';

export default function ItemList() {
  // definizione dello stato iniziale dell'applicazione come array vuoto
  const initialState = [];

  // definizione della funzione reducer
  function reducer(state, action) {
    switch (action.type) {
      case 'ADD_ITEM':
        // ritorna il nuovo stato aggiungendo l'elemento alla lista
        return [...state, action.payload];
      case 'REMOVE_ITEM':
        // ritorna il nuovo stato rimuovendo l'elemento dalla lista
        return state.filter((item) => item !== action.payload);
      default:
        // se l'azione non è valida, ritorna lo stato attuale
        return state;
    }
  }

  // dichiarazione dello stato locale "items" e della funzione per aggiornarlo "dispatch"
  const [items, dispatch] = useReducer(reducer, initialState);

  // funzione chiamata al submit del form per aggiungere un nuovo elemento alla lista
  function handleSubmit(event) {
    event.preventDefault();
    const newItem = event.target.elements.item.value;
    dispatch({ type: 'ADD_ITEM', payload: newItem });
    event.target.reset();
  }

  // funzione chiamata al click del pulsante per rimuovere un elemento dalla lista
  function handleRemove(item) {
    dispatch({ type: 'REMOVE_ITEM', payload: item });
  }

  return (
    <div>
      <h2>Lista elementi</h2>
      <ul>
        {items.map((item) => (
          <li key={item}>
            {item}
            <button onClick={() => handleRemove(item)}>X</button>
          </li>
        ))}
      </ul>
      <form onSubmit={handleSubmit}>
        <input type="text" name="item" placeholder="Aggiungi elemento" />
        <button type="submit">Aggiungi</button>
      </form>
    </div>
  );
}

In questo esempio, la funzione reducer definisce come lo stato del componente deve essere aggiornato a seconda dell’azione ricevuta. Nel nostro caso, abbiamo definito due azioni: “ADD_ITEM” per aggiungere un elemento alla lista e “REMOVE_ITEM” per rimuoverlo.

Nella dichiarazione dello stato locale “items” e della funzione “dispatch”, utilizziamo il “useReducer” hook per gestire lo stato dell’applicazione e forniamo la funzione reducer e lo stato iniziale come parametri. Il hook restituisce l’array contenente lo stato attuale dell’applicazione e la funzione “dispatch”, utilizzata per inviare azioni alla funzione reducer.

Infine, utilizziamo la funzione “handleSubmit” per aggiungere un nuovo elemento alla lista quando l’utente invia il form e la funzione “handleRemove” per rimuovere un elemento quando l’utente clicca sul pulsante “X” accanto ad ogni elemento della lista.

In questo esempio, “useReducer” viene utilizzato per semplificare la gestione dello stato dell’applicazione. La funzione reducer ci consente di definire in modo chiaro e conciso come lo stato dell’applicazione deve essere aggiornato in risposta alle azioni ricevute. Utilizzando “useReducer” possiamo separare la gestione dello stato dalla logica del componente, migliorando la leggibilità e la manutenibilità del nostro codice.

In sintesi, il “useReducer” hook di React è uno strumento utile per gestire lo stato di un componente utilizzando una funzione reducer. Ciò consente di semplificare la gestione dello stato dell’applicazione, separando la logica del componente dalla gestione dello stato. Utilizzando “useReducer” in modo efficace, è possibile scrivere codice più pulito, leggibile e facile da mantenere.