Saya sedang mencipta beberapa butang dalam React yang mencetuskan perubahan keadaan daripada satu ke seterusnya. Beberapa butang saya mempunyai tiga keadaan, diwakili oleh enum. Ketiga-tiga negeri ini harus ditetapkan dalam susunan berturut-turut. Apabila nilai terakhir dicapai, operasi seterusnya harus menetapkan keadaan kembali kepada nilai pertama penghitungan semula. Apakah cara bijak untuk mencapai ini?

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),
      }
    )
  )
);