Zustand ile Basit Bir React Uygulaması

Zustand Nedir

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.

İlgini çekebilir:  Next.js: SEO Açısından Avantajları ve Dezavantajları

More Reading

Post navigation