Estrarre la Logica dello State in un Reducer

Consolidare la logica dello state con una reducer

Come i tuoi componenti crescono in complessità, può diventare difficile vedere a primo d’occhio tutti i modi differenti nel quale uno state di un componente viene aggiornato. Per esempio, il componente TaskApp contiene sotto un array di tasks in state e usa tre differenti event handler per aggiungere e modificare tasks:

Ciascuno dei suoi event handler chiama setTasks in ordine di aggiornare lo state. Al crescere del componente, cresce anche la quantità di logica dello state cosparse da esso. Per ridurre la complessità e mantenere la logica in un posto easy-to-access, puoi spostare quella logica di state dentro ad una singola funzione al di fuori del componente, chiamata “reducer”.

Le funzioni reducer sono un modo differente di gestire lo state. Puoi migrare da useState a useReducer in tre passaggi:

1. Sposta dal setting state alle azioni di dispatching.
2. Scrivi una funzione di reducer.
3. Usa la reducer dal tuo componente.

Passaggio 1: Sposta dal setting state alle azioni di dispatching

I tuoi event handler attualmente specificano cosa fare dal setting state:

function handleAddTask(text) {
  setTasks([
    ...tasks,
    {
      id: nextId++,
      text: text,
      done: false,
    },
  ]);
}

function handleChangeTask(task) {
  setTasks(
    tasks.map((t) => {
      if (t.id === task.id) {
        return task;
      } else {
        return t;
      }
    })
  );
}

function handleDeleteTask(taskId) {
  setTasks(tasks.filter((t) => t.id !== taskId));
}

Rimuovi tutta la logica del setting state. Cosa devi lasciare con i tre event handler:

• handleAddTask(text) viene chiamato quando l’utente preme “Add”.
• handleChangeTask(task) viene chiamato quando l’utente aziona un task o preme “Save”.
• handleDeleteTask(taskId) viene chiamato quando l’utente preme “Delete”.

Gestire lo state con i reducer è leggermente diverso dall’utilizzare direttamente un setting state. Invece di dire a React “cosa fare” utilizzando setting state, specifichi “cosa lo user ha appena fatto” utilizzando delle azioni di dispatching che provengono dai tuoi event handler. (Lo state che aggiorna la logica vive da un altra parte!) Quindi invece di “impostare tasks” tramite un event handler, stai utiilizzando un’azione di dispatching come “aggiungere/modificare/cancellare un task”. Questo descrive molto di più l’intenzione dell’utente.

function handleAddTask(text) {
  dispatch({
    type: 'added',
    id: nextId++,
    text: text,
  });
}

function handleChangeTask(task) {
  dispatch({
    type: 'changed',
    task: task,
  });
}

function handleDeleteTask(taskId) {
  dispatch({
    type: 'deleted',
    id: taskId,
  });
}

L’oggetto che passi al dispatch è chiamata “azione”:

function handleDeleteTask(taskId) {
  dispatch(
    // "action" object:
    {
      type: 'deleted',
      id: taskId,
    }
  );
}

È un normale oggetto JavaScript. Decidi tu cosa metterci dentro, ma generalmente dovrebbe contenere la minima informazione riguardo cosa è successo. (Aggiungerai la funzione di dispatch in un altro passaggio.)

dispatch({
  // specifico del componente
  type: 'what_happened',
  // qua vanno gli altri campi
});

Step 2: Scrivi una funzione reducer

Una funzione reducer è dove metterai la tua logica dello state. Prende due argomenti, lo state corrente e l’oggetto action e ritorna il nuovo state:

function yourReducer(state, action) {
  // ritorna il nuovo state per React da utilizzare
}

React metterà quello che viene ritornato dalla funzione reducer nello state.

Per spostare la logica set dello state dai tuoi event handler in una funzione reducer in questo esempio, dovrai:

1. Dichiarare lo state corrente (tasks) come primo argomento.
2. Dichiarare l’oggetto action come secondo argomento.
3. Ritornare il next state dal reducer (il quale verrà collocato nello state da React).

Qui c’è tutta la logica di impostazione dello state migrata in una funzione reducer:

function tasksReducer(tasks, action) {
  if (action.type === 'added') {
    return [
      ...tasks,
      {
        id: action.id,
        text: action.text,
        done: false,
      },
    ];
  } else if (action.type === 'changed') {
    return tasks.map((t) => {
      if (t.id === action.task.id) {
        return action.task;
      } else {
        return t;
      }
    });
  } else if (action.type === 'deleted') {
    return tasks.filter((t) => t.id !== action.id);
  } else {
    throw Error('Unknown action: ' + action.type);
  }
}

Poiché la funzione reducer prende lo state (tasks) come argomento, puoi dichiararla all’esterno del tuo componente. Ciò riduce il livello di indentazione e può rendere il tuo codice più leggibile.

function tasksReducer(tasks, action) {
  switch (action.type) {
    case 'added': {
      return [
        ...tasks,
        {
          id: action.id,
          text: action.text,
          done: false,
        },
      ];
    }
    case 'changed': {
      return tasks.map((t) => {
        if (t.id === action.task.id) {
          return action.task;
        } else {
          return t;
        }
      });
    }
    case 'deleted': {
      return tasks.filter((t) => t.id !== action.id);
    }
    default: {
      throw Error('Unknown action: ' + action.type);
    }
  }
}

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce(
  (result, number) => result + number
); // 1 + 2 + 3 + 4 + 5

import tasksReducer from './tasksReducer.js';

let initialState = [];
let actions = [
  {type: 'added', id: 1, text: 'Visit Kafka Museum'},
  {type: 'added', id: 2, text: 'Watch a puppet show'},
  {type: 'deleted', id: 1},
  {type: 'added', id: 3, text: 'Lennon Wall pic'},
];

let finalState = actions.reduce(tasksReducer, initialState);

const output = document.getElementById('output');
output.textContent = JSON.stringify(finalState, null, 2);

Step 3: Usa il reducer dal tuo componente

Infine, devi collegare il tasksReducer al tuo componente. Importa l’Hook useReducer da React:

import { useReducer } from 'react';

Poi puoi sostituire useState:

const [tasks, setTasks] = useState(initialTasks);

Con useReducer così:

const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);

L’Hook useReducer è simile allo useState-devi passargli uno stato iniziale e lui ti restituisce un valore dello stato e un modo per impostare lo stato (in questo caso, la funzione dispatch). Ma è un po’ diverso.

L’Hook useReducer prende due argomenti:

1. Una funzione reducer
2. Uno state iniziale

E restituisce:

1. Un valore dello state
2. Una funzione dispatch (per “inviare” azioni dell’utente al reducer)

Ora è completamente collegato! Qui, il reducer è dichiarato nella parte in basso del file del componente:

Se vuoi, puoi anche spostare il reducer in un file diverso:

La logica del componente può essere più facile da leggere quando si ha una separation of concerns come in questo modo. Ora, gli event handler specificano solo cosa è successo inviando azioni, e la funzione reducer determina come si aggiorna lo state in risposta ad esse.

Confronto tra useState e useReducer

I reducer non sono privi di svantaggi! Ecco alcuni modi per confrontarli:

• Dimensione del codice: Generalmente, con useState devi scrivere meno codice in anticipo. Con useReducer, devi scrivere sia una funzione reducer che azioni di dispatch. Tuttavia, useReducer può aiutare a ridurre il codice se molti event handler modificano lo stato in modo simile.
• Leggibilità: useState è molto facile da leggere quando gli aggiornamenti dello state sono semplici. Quando diventano più complessi, possono gonfiare il codice del tuo componente e renderlo difficile da esaminare. In questo caso, useReducer ti permette di separare in modo pulito il come della logica di aggiornamento dal cosa è successo degli event handler.
• Debugging: Quando hai un bug con useState, può essere difficile capire dove lo stato è stato impostato in modo errato, e perché. Con useReducer, puoi aggiungere un log della console nel tuo reducer per vedere ogni aggiornamento dello state e perché è successo (a causa di quale azione). Se ogni azione è corretta, saprai che l’errore è nella logica del reducer stesso. Tuttavia, devi passare attraverso più codice rispetto a useState.
• Testing: Un reducer è una funzione pura che non dipende dal tuo componente. Questo significa che puoi esportarlo e testarlo separatamente in isolamento. Anche se generalmente è meglio testare i componenti in un ambiente più realistico, per la logica di aggiornamento dello stato complessa può essere utile affermare che il tuo reducer restituisce un particolare stato per un particolare stato iniziale e azione.
• Preferenza personale: Ad alcune persone piacciono i reducers, ad altre no. Va bene. È una questione di preferenza. Puoi sempre passare da useState a useReducer e viceversa: sono equivalenti!

Raccomandiamo l’uso di un reducer se spesso incontri bug dovuti ad aggiornamenti errati di state in qualche componente, e desideri introdurre più struttura nel suo codice. Non devi usare i reducer per tutto: sentiti libero di combinare e variare! Puoi anche usare useState e useReducer nello stesso componente.

Scrivere bene i reducer

Tieni a mente questi due suggerimenti quando scrivi i reducer:

• I reducer devono essere puri. Similmente alle funzioni di aggiornamento dello stato, i reducer vengono eseguiti durante il rendering! (Le azioni vengono messe in coda fino al prossimo render.) Questo significa che i reducer devono essere puri: gli stessi input producono sempre lo stesso output. Non dovrebbero inviare richieste, programmare timeout, o eseguire side effect (operazioni che impattano cose al di fuori del componente). Dovrebbero aggiornare oggetti e array senza mutazioni.
• Ogni azione descrive un’unica interazione dell’utente, anche se ciò comporta molteplici cambiamenti nei dati. Ad esempio, se un utente preme “Reset” su un modulo con cinque campi gestiti da un reducer, ha più senso inviare una sola azione reset_form piuttosto che cinque azioni set_field separate. Se registri ogni azione in un reducer, quel registro (log) dovrebbe essere abbastanza chiaro da permetterti di ricostruire quali interazioni o risposte sono avvenute e in che ordine. Questo ti aiuta con il debugging!

Scrivere reducers concisi con Immer

Esattamente come con l’aggiornamento degli oggetti e degli array nello state ordinario, puoi usare la libreria Immer per rendere i reducer più concisi. Qui, useImmerReducer ti permette di mutare lo stato con push o l’assegnazione arr[i] =:

I reducer devono essere puri, quindi non dovrebbero mutare lo state. Ma Immer ti fornisce un oggetto draft speciale che è sicuro da mutare. Dietro le quinte, Immer creerà una copia del tuo state con le modifiche che hai apportato al draft. Questo è il motivo per cui i reducer gestiti da useImmerReducer possono mutare il loro primo argomento e non hanno bisogno di ritornare lo state.