Modern Uygulamalar için Durum Yönetimi

Modern uygulamalar, özellikle tek sayfalı uygulamalar ve mikro hizmet mimarileri, durum yönetimi konusunda benzersiz zorluklar sunar. Durum, kullanıcının mevcut eylemi veya durumu temsil eden geçici verilerdir ve bunu yönetmek, dinamik ve yanıt veren uygulamalar oluşturmak için hayati önem taşır. Uygulamalarımız daha karmaşık hale geldikçe, durum yönetimini ele almak için sağlam bir stratejiye sahip olmak, tutarlı bir kullanıcı deneyimi sağlamak ve uygulama durumunu izlemek için kritik öneme sahiptir. Durum yönetimi, kullanıcı etkileşimi sırasında uygulama durumunu izleme ve yönetme işlemidir. Bu, kullanıcının girişine, tercihlerine veya hatta uygulama içindeki eylemlere göre değişebilir. Etkileşimli ve dinamik uygulamalar oluşturmak için, geliştiricilerin durum değişikliklerini izlemesi, depolaması ve buna göre yanıt vermesi gerekir. Durum yönetimi, özellikle tek sayfalı uygulamalarda, kullanıcının deneyimini şekillendiren ve tutarlı, öngörülebilir bir davranış sağlayan kilit bir unsurdur. Teknik Açıklama: Durum Yönetimi Nedir? Durum yönetimi, kullanıcının uygulama içindeki yolculuğunu ve etkileşimini etkileyen geçici verileri izleme ve yönetme işlemidir. Bu, kullanıcının geçerli oturumunu, tercihlerini, form girdilerini veya herhangi bir kullanıcı eylemini yansıtabilir. Durum yönetimi, uygulamaya belirli bir anda ne olduğunu anlamak için geliştiricilere yardımcı olur ve buna göre yanıt vermek için kullanılır. Örneğin, bir alışveriş sepeti işlevi düşünün. Bir kullanıcı öğeler ekledikçe, kaldırdığında veya miktarları değiştirdiğinde, uygulama durumu değişir. Durum yönetimi, kullanıcının bu eylemleri gerçekleştirmesine izin vermekle kalmaz, aynı zamanda bu değişiklikleri izler ve güncel tutar, böylece kullanıcı başka bir sayfaya gittiğinde veya uygulamayı daha sonra yeniden ziyaret ettiğinde, alışveriş sepetinin doğru ve güncel kaldığından emin olur. Örnek: Alışveriş Sepeti Uygulaması Bir çevrimiçi alışveriş sepeti uygulaması durumu yönetme ihtiyacının mükemmel bir örneğidir. Kullanıcı öğeler ekler, kaldırır veya miktarları güncellerken, uygulama durumu bu değişiklikleri yansıtacak şekilde güncellenmelidir. import React, { useState } from 'react'; function ShoppingCart() { // Alışveriş sepeti öğelerini depolamak için durum değişkeni const [cartItems, setCartItems] = useState([]); // Yeni bir öğe eklemek için işlev const addToCart = (item) => { // Mevcut öğeleri yeni öğeyle güncelle setCartItems([...cartItems, item]); }; // Sepetten bir öğeyi kaldırma işlevi const removeFromCart = (item) => { // Belirtilen öğeyi filtreleyerek güncelle setCartItems(cartItems.filter((i) => i !== item)); }; return ( Alışveriş Sepeti {cartItems.map((item) => ( {item.name} - {item.price} removeFromCart(item)}>Kaldır ))} ); } function AddItemOnClick({ addToCart }) { const [item, setItem] = useState({ name: '', price: 0 }); const handleAddItem = () => { addToCart(item); setItem({ name: '', price: 0 }); // Formu sıfırla }; return ( setItem({ ...item, name: e.target.value })} placeholder="Öğe Adı" /> setItem({ ...item, price: parseInt(e.target.value, 10) })} placeholder="Fiyat" /> Ekle ); } export default ShoppingCart; Yukarıdaki örnekte, useState hook'u, alışveriş sepeti öğelerini depolamak için kullanılan cartItems durumunu başlatmak ve yönetmek için kullanılır. addToCart işlevi, yeni bir öğe eklendiğinde cartItems dizisine yeni öğeyi eklemek için setCartItems tarafından tetiklenir. Benzer şekilde, removeFromCart işlevi, bir öğe sepetten kaldırıldığında diziyi filtrelemek için kullanılır. Bu şekilde, uygulama, kullanıcının eylemlerine bağlı olarak alışveriş sepeti durumunu izler ve günceller. Bu, kullanıcının uygulamayla etkileşimi sırasında tutarlı ve öngörülebilir bir deneyim sağlar. Gerçek Dünya Senaryosu: Seyahat Planlama Uygulaması Durum yönetimi, seyahat planlama uygulamalarında da önemli bir rol oynar. Kullanıcıların uçuşları, otelleri ve etkinlikleri aramasına, seçmesine ve rezervasyon yapmasına izin veren bir uygulama düşünün. Durum yönetimi, kullanıcının tercihlerini ve seçimlerini izlemek için kullanılabilir. Örneğin, bir kullanıcı bir uçuş araması yapar ve belirli bir tarih aralığı ve varış yeri seçer. Uygulama, kullanıcının bu tercihlerini durum olarak saklayabilir ve sonraki aramalar için varsayılan değerler olarak kullanabilir. Ayrıca, kullanıcının seçtiği uçuşlar, oteller veya etkinlikler de durum olarak saklanabilir, böylece kullanıcının sepeti veya favorileri gibi bir sayfada bunları görüntülemesi ve yönetmesi sağlanabilir. Durum yönetimi, kullanıcının geçmiş aramalarını ve tercihlerini de saklayabilir, böylece uygulama kişiselleştirilmiş öneriler sunabilir. Örneğin, uygulama, kullanıcının geçmişte sık sık ziyaret ettiği veya aradığı varış noktaların

import React, { useState } from 'react';

function ShoppingCart() {
  // Alışveriş sepeti öğelerini depolamak için durum değişkeni
  const [cartItems, setCartItems] = useState([]);

  // Yeni bir öğe eklemek için işlev
  const addToCart = (item) => {
    // Mevcut öğeleri yeni öğeyle güncelle
    setCartItems([...cartItems, item]);
  };

  // Sepetten bir öğeyi kaldırma işlevi
  const removeFromCart = (item) => {
    // Belirtilen öğeyi filtreleyerek güncelle
    setCartItems(cartItems.filter((i) => i !== item));
  };

  return (
    <div>
      <h1>Alışveriş Sepeti</hım>
      <ul>
        {cartItems.map((item) => (
          <li key={item.id}>
            {item.name} - {item.price}
            <button onClick={() => removeFromCart(item)}>Kaldır</button>
          </li>
        ))}
      </ul>
      <AddItemOnClick addToCart={addToCart} />
    </div>
  );
}

function AddItemOnClick({ addToCart }) {
  const [item, setItem] = useState({ name: '', price: 0 });

  const handleAddItem = () => {
    addToCart(item);
    setItem({ name: '', price: 0 }); // Formu sıfırla
  };

  return (
    <div>
      <input
        type="text"
        value={item.name}
        onChange={(e) => setItem({ ...item, name: e.target.value })}
        placeholder="Öğe Adı"
      />
      <input
        type="number"
        value={item.price}
        onChange={(e) => setItem({ ...item, price: parseInt(e.target.value, 10) })}
        placeholder="Fiyat"
      />
      <button onClick={handleAddItem}>Ekle</button>
    </div>
  );
}

export default ShoppingCart;

Related Posts

RavenDB 7.0 Released: Moving to NLog

Apr 26, 2025  0

Apr 19, 2025  0

Unlocking Efficiency: The Power of Kong AI Gateway

Apr 26, 2025  0