Come gestire un carrello in React e useReducer

Che cosa realizzeremo in questo progetto ?

Nel progetto presente all'interno del corso andremo a gestire un classico carrello di un ecommerce usando useReducer hook. Per meri fini didattici nell'articolo però andremo a vedere come si utilizza lo useReducer e porteremo l'esempio di un contatore.

Di che cosa avremmo bisogno ?

• useContext: Come abbiamo visto nel progetto precedente, lo useContext è il modo più semplice per condividere valori, state e funzioni tra componenti che non sono figli delle stesso componente.

• useReducer: Tutti i nostri state saranno gestiti con questo hook, che riproduce il comportamento, seppur semplificato di redux.

Che cosa è lo useReducer e quando usarlo

Lo useReducer è un'alternativa a useState per gestire logiche di update maggiormente innestate e complesse. Inoltre permette di non passare callback ai nostri components ma di utilizzare la funzione di dispatch. Per chi avesse precedente esperienza con Redux, dovreste sapere come funziona.

Spesso useReducer e useContext vanno a braccetto poiché è un ottimo modo per condividere gli state in tutta l'applicazione. Per saperne di più sullo useContext consulta il progetto: Usare useContext per aprire una Sidebar

Come inizializzare lo useReducer

Questo hook accetta come parametri una reducer function ed uno stato iniziale.

const initialState = {
  products: [],
  isLoading: true,
  isError: false,
  total: 0,
  itemCounter: 0,
};
const AppProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  //...other stuff
 return (
    <AppContext.Provider
      value={{
        ...state,
        //...
       }}>{children}
    </AppContext.Provider

Cosa sia l'intialState credo abbia poco bisongo di spiegazioni mentre che cosa è una reducer function è sicuramente un topic più interessante. Una reducer function è una funzione che accetta due argomenti e, basandosi su questi due argomenti, restituisce un nuovo valore di stato.

Il nostro hook ritorna quindi una tuple, che ha come primo parametro lo state e come secondo invece la funzione di dispatch.

Come funziona lo useReducer

Facciamo un esempio molto semplice, ovvero quello di dover realizzare un contatore.

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

Come vedete abbiamo la nostra reducer function il cui scopo è accettare 2 parametri e ritornare un nuovo state. Questi due parametri sono:

1. state: Il valore del nostro state attuale.
2. action: Che è un oggetto che contiene sempre la chiave type a cui si assegna una stringa che servirà ad indicare al nostro reducer come aggiornare lo state. Il secondo valore di questo oggetto è chiamato payload e contiene tutte le informazioni di cui abbiamo bisogno per aggiornare il nostro state.

E' molto importante notare come come default value dello switch della reducer function abbiamo il throw new Error();. Questo avviene perché è fondamentale updatare sempre lo state e non ritornare undefined altrimenti la nostra applicazione con molta probabilità crasherebbe.

Come usare la Dispatch Function

L'ultimo tassello del nostro useReducer hook è la dispatch function. Il suo scopo è proprio quello di dispatchare una action, che deve corrispondere ad uno dei casi presenti nello swtich della nostra reducer function. In questo modo provocherà l'update dello state.