Zustand Nedir
Zustand, JavaScript ve React kullanarak geliştirilen bir durum yönetim kütüphanesidir. Bu kütüphane, React uygulamalarında durum (state) yönetimi işlemlerini daha basit ve etkili bir şekilde gerçekleştirmeyi amaçlar. Zustand, React Context API’sini kullanarak birçok temel konsepti basitleştirir ve geliştiricilere durum yönetimi için kullanabilecekleri kullanıcı dostu bir API sunar.
1 – İlk olarak yeni bir React projesi oluşturalım.
create-react-app zustand-example cd zustand-example
2 – Zustand kütüphanesini ekleyelim.
npm install zustand
3 – Zustand store oluşturalım.
Projede bir Zustand store oluşturalım. Örneğin, bir tema değiştirme uygulaması oluşturmak için bir tema store oluşturabiliriz. src
klasöründe store.js
adında bir dosya oluşturalım.
import create from 'zustand'; const useThemeStore = create((set) => ({ theme: 'light', toggleTheme: () => set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })), })); export default useThemeStore;
4 – Componentlerde Zustand Kullanımı
Zustand store’u componentler içinde kullanmak için useStore
kullanabilirsiniz. Örneğin, App.js
dosyasında temayı değiştirebileceğimiz bir bileşen ekleyelim:
import React from 'react'; import useThemeStore from './store'; function App() { const { theme, toggleTheme } = useThemeStore(); const handleThemeToggle = () => { toggleTheme(); }; return ( <div className={`App ${theme}`}> <h1>Zustand Theme Toggle Example</h1> <button onClick={handleThemeToggle}>Toggle Theme</button> </div> ); } export default App;
5 – Projeyi başlatalım.
npm start
Tarayıcınızda çalışan React uygulamamızda “Toggle Theme” butonuna tıkladığımızda tema değişmelidir.