Cara terbaik untuk melaksanakan penukaran tiga keadaan dalam tindak balas?

Question

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

Answer 1

Berikut ialah contoh fungsi yang menerima sebarang enum dan akan mengembalikan nilai seterusnya atau nilai pertama jika ia adalah nilai terakhir:

function getNextEnumValue>(enumObj: T, currentValue: T[keyof T]): T[keyof T] {
  const enumValues = Object.values(enumObj);
  const enumKeys = Object.keys(enumObj) as (keyof T)[];
  const currentIndex = enumKeys.findIndex(key => enumObj[key] === currentValue);

  if (currentIndex === -1) {
    throw new Error(`Invalid enum value: ${currentValue}`);
  }

  const nextIndex = currentIndex + 1;
  if (nextIndex === enumKeys.length) {
    return enumObj[enumKeys[0]];
  }

  const nextValue = enumObj[enumKeys[nextIndex]];
  if (!enumValues.includes(nextValue)) {
    throw new Error(`Invalid enum value: ${nextValue}`);
  }

  return nextValue;
}