Je crée des boutons dans React qui déclenchent un changement d'état de l'un à l'autre. Certains de mes boutons ont trois états, représentés par des énumérations. Ces trois états doivent être définis dans un ordre consécutif. Lorsque la dernière valeur est atteinte, l'opération suivante doit rétablir l'état à la première valeur de l'énumération. Quelle est la manière intelligente d’y parvenir ?

import { create } from 'zustand'
import { devtools, persist, createJSONStorage } from 'zustand/middleware'
import { BackgroundVariant as Background } from 'reactflow';

function nextBackground(background: Background): Background {
  switch (background) {
    case Background.Dots:
      return Background.Cross;
    case Background.Cross:
      return Background.Lines;
    default:
      return Background.Dots;
  };
};

interface MenuState {
  background: Background;
  toggleBackground: () => void;
}

export const useMenuStore = create<MenuState>()(
  devtools(
    persist(
      (set) => ({
        background: Background.Dots,
        toggleBackground: () => set((state) => ({
          background: nextBackground(state.background)
        }))
      }),
      {
        name: 'menu-storage',
        storage: createJSONStorage(() => localStorage),
      }
    )
  )
);