반응으로 3상태 스위칭을 구현하는 가장 좋은 방법은 무엇입니까?
React에서 상태 변경을 트리거하는 몇 가지 버튼을 만들고 있습니다. 내 버튼 중 일부에는 열거형으로 표시되는 세 가지 상태가 있습니다. 이 세 가지 상태는 연속된 순서로 설정되어야 합니다. 마지막 값에 도달하면 다음 작업에서는 상태를 다시 열거형의 첫 번째 값으로 설정해야 합니다. 이 작업을 수행하는 깔끔한 방법은 무엇입니까?
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),
}
)
)
);