Gestire gli state in React con Zustand

Personalmente mi trovo già bene con il modo standard con cui React gestisce gli state.

Però ho voluto provare Zustand, che pare essere una libreria sempre più usata per questo scopo.

In questo articolo vediamo un pò di codice; il mio progetto si basa su Typescript, ma la libreria supporta anche Javascript.

Prima di tutto installiamola con npm:

npm i zustand

Poi create un file per lo store (libriStore.ts nel mio caso):

import {create} from "zustand";

type Libro = {
  id: number,
  titolo: string
}

export type Libri = Libro[] | null;

interface LibriState {
  libri: Libri
  setLibri: (libri: Libri) => void
  addLibro: (libro: Libro) => void
}

export const libriStore = create<LibriState>((set) => ({
  libri: null,
  setLibri: (libri) => set(() => ({libri})),
  addLibro: (libro: Libro) => set(({libri}) => {
    // const newLibro: Libro = {id: 0, titolo: ""}

    if (libri?.length) {
      return {libri: [...libri, libro]}
    } else {
      return {libri: [libro]}
    }
  }),
}))

Poi nel nostro componente:

import React, {useEffect} from 'react';
import {libriStore} from "./libriStore";

function App() {
  const {libri, setLibri, addLibro} = libriStore();

  useEffect(() => {
    setLibri([
      {id: 1, titolo: "IT"},
      {id: 2, titolo: "Sahara"},
    ]);
  }, []);

  return (
      <div className="App">
        <button onClick={() => {
          addLibro({id: 3, titolo: "Fairy Tale"});
          console.table(libri);
        }}>
          Aggiungi libro
        </button>
      </div>
  );
}

export default App;

Enjoy!