CONTATTACI

Guide per aspiranti programmatori

Programmatore che esamina react al microscopio
Lezione 20 / 41

Gestione dell’interfaccia: metodo dichiarativo

Quando scegliamo un approccio dichiarativo, la prima domanda che ci poniamo è: cosa vogliamo rappresentare? Questa domanda rivela già una cosa importante: è vero, stiamo lavorando sull’aspetto del form, ma l’aspetto del form dipende direttamente dalla richiesta di rete che effettua il salvataggio dei dati. Ed è quello che vogliamo rappresentare: non il form, ma la richiesta di rete.

La seconda domanda che ci poniamo è: quali sono le informazioni che descrivono quello che vogliamo rappresentare? Possiamo descrivere la richiesta di rete in quattro casi:

 

  1. Inattivo: la richiesta non è ancora avvenuta.
  2. Caricamento: il salvataggio sta succedendo, ma non sappiamo ancora come andrà.
  3. Successo: il salvataggio è avvenuto, e conosciamo il suo risultato.
  4. Fallimento: il salvataggio è avvenuto e ha fallito. Conosciamo la ragione per cui ha fallito.

 

A questo punto, possiamo costruire una base su cui costruire la nostra descrizione:

 

const NetworkRequestType = {
  idle: "idle",
  loading: "loading",
  success: "success",
  failure: "failure",
};

function makeIdleNetworkRequest() {
  return { type: NetworkRequestType.idle };
}

function makeLoadingNetworkRequest() {
  return { type: NetworkRequestType.loading };
}

function makeSuccessfulNetworkRequest(response) {
  return { type: NetworkRequestType.success, response };
}

function makeFailedNetworkRequest(error) {
  return { type: NetworkRequestType.failure, error };
}

Abbiamo definito i quattro stati della richiesta, rappresentati con degli oggetti. In qualsiasi momento del tempo, una chiamata di rete sarà rappresentata da un oggetto. L’oggetto ha sempre una proprietà type che ci dice in quale dei quattro stati è la richiesta. L’oggetto ha una proprietà response, che contiene i dati della risposta, solo quando lo stato è “successo”. L’oggetto ha una proprietà error, che contiene la ragione del fallimento, solo quando lo stato è “fallimento”.

Abbiamo anche creato quattro funzioni, che ci aiutano a creare richieste di rete nei diversi stati. In aiuto abbiamo anche NetworkRequestType, un oggetto che contiene la mappa di tutti e soli gli stati che una richiesta di rete può assumere.

A questo punto, possiamo integrare tutto nel nostro componente:

 

// File: src/components/TodoItemForm.jsx

import { useState } from "react";
import "./TodoItemForm.css";

const NetworkRequestType = {
  idle: "idle",
  loading: "loading",
  success: "success",
  failure: "failure",
};

function makeIdleNetworkRequest() {
  return { type: NetworkRequestType.idle };
}

function makeLoadingNetworkRequest() {
  return { type: NetworkRequestType.loading };
}

function makeSuccessfulNetworkRequest(response) {
  return { type: NetworkRequestType.success, response };
}

function makeFailedNetworkRequest(error) {
  return { type: NetworkRequestType.failure, error };
}

export default function TodoItemForm({ todoItem, onChange, onSubmit }) {
  const [networkState, setNetworkState] = useState(makeIdleNetworkRequest());

  // ...

  const onFormSubmit = (event) => {
    event.preventDefault();
    setNetworkState(makeLoadingNetworkRequest());

    onSubmit().then(
      (todoItem) => {
        setNetworkState(makeSuccessfulNetworkRequest(todoItem));
      },
      (error) => {
        setNetworkState(makeFailedNetworkRequest(error.message));
      }
    );
  };

  const isLoading = networkState.type === NetworkRequestType.loading;

  return (
    <form className="TodoItemForm" onSubmit={onFormSubmit}>
      <input
        type="checkbox"
        checked={todoItem.isDone}
        onChange={(event) => {
          onIsDoneChange(event.currentTarget.checked);
        }}
        disabled={isLoading}
      />
      <input
        type="text"
        placeholder="Description"
        value={todoItem.description}
        onInput={(event) => {
          onDescriptionChange(event.currentTarget.value);
        }}
        disabled={isLoading}
      />
      <input type="submit" value="Create" disabled={isLoading} />
      {networkState.type === NetworkRequestType.failure ? (
        <p style={{ color: "red" }}>{networkState.error}</p>
      ) : null}
    </form>
  );
}

Abbiamo creato uno stato per rappresentare la richiesta di rete che effettua il salvataggio dei dati. Lo stato è inizializzato nello stato “inattivo”. Al click del bottone “Create”, lo stato passa a “caricamento”. A seconda dell’andamento della richiesta, lo stato passa a “successo” o “errore”.

Le funzioni che abbiamo creato per aiutarci coincidono perfettamente con i dati che abbiamo a disposizione quando lo stato cambia: passiamo todoItem in caso di successo ed error.message in caso di fallimento.

Abbiamo creato una costante, isLoading, che rappresenta il fatto che la richiesta sia in stato di “caricamento”. In caso di fallimento, estraiamo l’errore dallo stato e lo visualizziamo.

Questo esempio dovrebbe averti chiarito la differenza tra approccio imperativo e approccio dichiarativo nella gestione delle interfacce utente in React. Pronto per i prossimi capitoli?

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.