State ManagementSlice pattern chia store lớn thành các module độc lập: mỗi slice là một StateCreator, gộp lại bằng spread trong create().
ts
const createCartSlice = (set, get) => ({
items: [],
addItem: (item) => set((s) => ({ items: [...s.items, item] })),
clearCart: () => set({ items: [] }),
})
const createUserSlice = (set) => ({
user: null,
setUser: (u) => set({ user: u }),
logout: () => set({ user: null }),
})
const useBoundStore = create((...a) => ({
...createCartSlice(...a),
...createUserSlice(...a),
}))Slice tham chiếu chéo nhau qua get():
ts
const createOrderSlice = (set, get) => ({
checkout: () => {
const { items, user } = get()
return api.order(user.id, items)
},
})Với TypeScript dùng StateCreator<BoundStore, [], [], CartSlice> — BoundStore là type của store gộp, CartSlice là type của riêng slice này.
Lưu ý: tên state/action không được trùng giữa các slice — spread object sẽ ghi đè lên nhau.