더 많은 기능을 추가됨에 따라 스토어가 비대해지고 관리하게 어려워질 수 있습니다.
메인 스토어를 더 작은 개별 스토어로 분할하여 모듈화할 수 있습니다. Zustand에서는 간단하게 할 수 있습니다!
개별 스토어 모듈
물고기(fishes) 상태 관리 스토어
export const createFishSlice = (set) => ({
fishes: 0,
addFish: () => set((store) => ({ fishes: store.fishes + 1 })),
});
다른 개별 스토어 모듈
곰(bear) 상태 관리 스토어
export const createBearSlice = (set) => ({
bears: 0,
addBear: () => set((store) => ({ bears: store.bears + 1 })),
eatFish: () => set((store) => ({ fishes: store.fishes - 1 })),
});
개별 스토어 모듈 병합
이제 두 스토어를 하나의 스토어로 결합할 수 있습니다.
import { create } from 'zustand';
import { createFishSlice } from './fishSlice';
import { createBearSlice } from './bearSlice';
export const useBoundStore = create((...a) => ({
...createBearSlice(...a),
...createFisheSlice(...a),
}));