В Zustand “slice” — это часть состояния, которая управляется отдельным хуком. Это позволяет разделить состояние на независимые части, что упрощает управление и тестирование.

import { create } from 'zustand';
 
const useCounterSlice = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));
 
const useUserSlice = create((set) => ({
  name: 'John',
  setName: (newName) => set({ name: newName }),
}));
 
// Использование в компоненте
function App() {
  const count = useCounterSlice((state) => state.count);
  const increment = useCounterSlice((state) => state.increment);
  const name = useUserSlice((state) => state.name);
  const setName = useUserSlice((state) => state.setName);
 
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>+</button>
      <h2>{name}</h2>
      <input value={name} onChange={(e) => setName(e.target.value)} />
    </div>
  );
}

Здесь useCounterSlice и useUserSlice — это разные “slice” состояния.


Назад