Jotai Kullanarak React'te Durum Yönetimini Keşfetmek: Pratik Bir Kılavuz

Küçük ölçekli projelerde durumu yönetmek, React kancaları ve donanımları kullanılarak genellikle basittir. Bununla birlikte, uygulama büyüdükçe ve farklı bileşenler arasında veri paylaşma ve bunlara erişme ihtiyacı ortaya çıktıkça, bu genellikle pervane sondajına yol açar. Ne yazık ki pervane sondajı, kod tabanını hızlı bir şekilde karıştırabilir ve ölçeklenebilirlik zorluklarını ortaya çıkarabilir.

Redux harika bir durum yönetimi çözümü sunarken, API'si nispeten küçük projeler için bunaltıcı olabilir. Buna karşılık, yönetmek için atom adı verilen bağımsız durum birimlerinden yararlanan minimal bir durum yönetimi kitaplığı olan Jotai durum, dikme delme gibi zorlukları ortadan kaldırır ve daha doğrudan ve ölçeklenebilir bir durum yönetimi sağlar yaklaşmak.

Jotai Nedir ve Nasıl Çalışır?

Jotai Redux gibi daha karmaşık alternatiflerin aksine basit bir durum yönetimi çözümü sunan bir durum yönetimi kitaplığıdır. React uygulamasında durumu yönetmek için atom adı verilen bağımsız durum birimlerini kullanır.

İdeal olarak, uygulamadaki farklı bileşenler, Jotai tarafından sağlanan bir kancayı kullanarak bu atomlara erişir ve günceller. atomu kullan. İşte bir Jotai atomunun nasıl oluşturulacağına dair basit bir örnek:

içe aktarmak { atom } itibaren'jotai';
sabit sayıAtom = atom(1);

Jotai'de atomlara erişmek ve atomlarla çalışmak için atomu kullan diğerleri gibi kanca Tepki kancaları, işlevsel bir bileşen içindeki bir durumun değerine erişmenizi ve bunları güncellemenizi sağlar.

İşte kullanımını göstermek için bir örnek:

içe aktarmak {Atom'u kullan} itibaren'jotai';
sabit sayıAtom = atom(1);
işlevBileşenim() {
sabit [count, setCount] = useAtom (countAtom);
sabit artış = () => sayıyı ayarla((öncekiSayı) => öncekiSayı + 1);
geri dönmek (


Sayı: {sayı}</p>
artış</button>
 </div>
 );
}

Bu örnekte, atomu kullan erişmek için kanca kullanılır. atom sayısı atom ve ilişkili değeri. bu setCount işlevi, atomun değerini güncellemek için kullanılır ve ilişkili tüm bileşenler, güncellenen değerle otomatik olarak yeniden oluşturulur.

Yalnızca etkilenen bileşenleri tetikleyerek, uygulama genelinde gereksiz yeniden işlemeleri azaltır. Yeniden işlemeye yönelik bu hedefe yönelik yaklaşım, uygulamanın genel performansını artırır.

Temel bilgiler dışında, Jotai'nin durum yönetimi yeteneklerini daha iyi anlamak için basit bir To-do React uygulaması oluşturalım.

Jotai Kullanarak React'te Durum Yönetimi

Başlamak, bir React uygulaması oluştur. Alternatif olarak, React projesi oluşturmak için Vite'ı kullanın. Temel bir React uygulamasını oluşturduktan sonra devam edin ve uygulamanıza Jotai'yi kurun.

npm jotai'yi kur

Ardından, uygulamanızda Jotai'yi kullanmak için uygulamanızın tamamını Sağlayıcı bileşen. Bu bileşen, uygulama genelinde atom değerleri sağlamak için merkezi merkez görevi gören depoyu içerir.

Ek olarak, atomların ilk durumlarını bildirmenizi sağlar. Uygulamanızı ile sararak Sağlayıcı, uygulamadaki tüm bileşenler tanımladığınız atomlara erişim kazanır ve daha sonra atomlarla etkileşime geçebilir ve durumu güncelleyebilir. atomu kullan kanca.

içe aktarmak { Sağlayıcı } itibaren"jotay";

Şimdi uygulamayı içine sarın index.js veya ana.jsx Aşağıda gösterildiği gibi.

içe aktarmak Tepki itibaren'tepki'
içe aktarmak ReactDOM itibaren"react-dom/client"
içe aktarmak Uygulama itibaren'./App.jsx'
içe aktarmak'./index.css'
içe aktarmak { Sağlayıcı } itibaren"jotay";
ReactDOM.createRoot(belge.getElementById('kök')).render(



 </Provider>
 </React.StrictMode>,
)

Veri Deposu Yapılandırma

Mağaza, uygulamanın durumu için merkezi bir havuz görevi görür. Jotai kullanarak durum yönetimi için gerekli olan atomların, seçicilerin ve diğer ilgili işlevlerin tanımını içerir.

Bu durumda, Yapılacaklar uygulaması için öğe listesini yönetmek için atomları yönetir. İçinde kaynak dizin, oluştur TodoStore.jsx dosyasını açın ve aşağıdaki kodu ekleyin.

içe aktarmak { atom } itibaren"jotay";
ihracatsabit TodosAtom = atom([]);

oluşturup dışa aktararak TodosAtom, uygulamadaki farklı bileşenler arasında rahatça etkileşim kurabilir ve yapılacaklar durumunu güncelleyebilirsiniz.

Yapılacaklar Uygulaması İşlevselliğini Uygulama

Artık React uygulamasında Jotai'yi yapılandırdığınıza ve uygulamanın durumunu yönetmek için bir atom oluşturduğunuza göre, gidin ilerleyin ve yapılacak iş için ekleme, silme ve düzenleme işlevlerini işleyecek basit bir yapılacak iş bileşeni oluşturun öğeler.

Yeni bir tane oluştur bileşenler/Todo.jsx dosya kaynak dizin. Bu dosyaya aşağıdaki kodu ekleyin:

1. Veri deposunu içe aktarın ve atomu kullan kanca.

   içe aktarmak Tepki, { useState } itibaren'tepki';
   içe aktarmak { TodosAtom } itibaren'../TodoStore';
   içe aktarmak {Atom'u kullan} itibaren'jotai';

2. İşlevsel bileşeni oluşturun ve JSX öğelerini ekleyin.

   sabit Yapılacak = () => {
   
   geri dönmek (
   
   
    yer tutucu="Yeni yapılacaklar"
    değer={değer}
    onChange={event => setValue (event.target.value)}
    />
   Yapılacak İş Ekle</button>
   
   
    {todos.map(yapmak => (
   
   
    {yapılacak.metin}
    handleDelete (todo.id)}>Sil</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };