Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, YouTube Barkod kanalında yayınlanan bir eğitim içeriğidir. Sunucu, Redux kütüphanesinin temel kavramlarını ve kullanımını Türkçe bir kaynak olarak anlatmaktadır.
- Video, Redux'un neden kullanıldığını, global state yönetimi sağladığını ve React'teki state'lerin nasıl yönetildiğini açıklamaktadır. İçerik, Redux'un çalışma prensibini görsel örneklerle anlatarak başlayıp, adım adım Redux kurulumu, store oluşturma, type'ların tanımlanması ve reducer'ların yazılması gibi temel adımları göstermektedir. Ayrıca counter ve liste gibi farklı objelerin nasıl yönetileceği, action ve selector fonksiyonlarının kullanımı da kod örnekleriyle açıklanmaktadır.
- Video, e-ticaret sitesi örneği üzerinden Redux'un pratik kullanımını göstermekte ve Redux'un alternatif olarak MobX ve React'in context yapısı gibi alternatifler de bahsedilmektedir. Sunucu, Redux'un piyasadaki popülerliğini vurgulayarak, ileri seviye bir konu olduğu için izleyicilerin yorumlarda eksik veya yanlış bilgileri belirtmelerini istemektedir.
- 00:01Redux Nedir ve Neden Kullanılır?
- Bu video, Redux'ı temelden anlatmak amacıyla hazırlanmıştır.
- Redux, global state yönetimi sağlayarak bir state'e her yerden erişim imkanı sunar.
- React'teki mevcut state'ler sadece kendi bileşenleri tarafından erişilebilir veya üst-alt yapılar aracılığıyla iletilir, bu kod fazlalığına ve karışıklığına neden olur.
- 02:56Redux'un Çalışma Prensibi
- Redux'ta UI bileşenlerinden bir action tetiklenir ve bu action reducer'a yönlendirilir.
- Reducer, gelen action'a göre state'in nasıl değişeceğini belirler ve store'u günceller.
- Herhangi bir yerden store'a ulaşılarak reducerlardaki değiştirilen verilere erişilebilir.
- 04:02Redux Kurulumu ve Örnek Uygulama
- Redux kurulumu için "redux" ve "react-redux" paketleri yüklenir.
- Örnek uygulama için basit bir sayaç bileşeni ve arttır/azalt butonları oluşturulur.
- Redux için actions, reducers ve types klasörleri oluşturulur.
- 08:45Type Tanımlama ve Reducer Oluşturma
- Type'lar, actionları reducerlara gönderirken karışmaması için key-value ilişkisi şeklinde tanımlanır.
- Reducer, mevcut state'i ve gelen action'u alarak state'i günceller.
- Reducer'da switch yapısı kullanılarak action type'ına göre farklı işlemler gerçekleştirilir.
- 14:43Redux Action Oluşturma
- Action fonksiyonları her zaman bir obje döndürmek zorundadır ve sabit değerler için direkt obje olarak tanımlanabilir.
- Action içinde "type" ve "payload" beklenir, ancak şu an için "payload" kullanılmayacak.
- "counter arttır" ve "counter azalt" adında iki action fonksiyonu oluşturulmuştur.
- 16:00Store Oluşturma
- Redux'dan "createStore" ve "combineReducers" fonksiyonları import edilir.
- Reducer'lar bir obje içinde "counter" anahtarıyla import edilir.
- "createStore" fonksiyonu kullanılarak store oluşturulur ve dışarı aktarılır.
- 18:14Provider Kullanımı
- Tüm uygulamada Redux store'una erişim sağlamak için "Provider" bileşeni kullanılır.
- "Provider" bileşeninin içinde "store" prop'una oluşturulan store gönderilir.
- Bu yapı sayesinde uygulamanın tüm bileşenlerinde state'e erişilebilir hale gelir.
- 20:04State'e Erişim ve Butonlar
- "useSelector" hook'u kullanılarak state'e erişilir ve counter değeri ekrana yazdırılır.
- "useDispatch" hook'u kullanılarak action'ları tetikleyen dispatch fonksiyonu oluşturulur.
- Arttır ve azalt butonlarının "onClick" olaylarında dispatch fonksiyonu kullanılarak ilgili action'lar tetiklenir.
- 25:36İkinci Reducer Örneği
- İkinci bir reducer (liste reducer) oluşturulur ve default state'i boş bir array olarak ayarlanır.
- "listeEkle" adında bir action fonksiyonu yazılır ve "type" ve "payload" parametreleri kullanılır.
- Yeni liste reducer'ı store'a eklenir ve uygulamada kullanılabilir hale getirilir.
- 28:43Redux Kullanımı ve Listeleme
- Kodda counter ve liste oluşturmak için gerekli düzenlemeler yapılıyor.
- React içinde fragman çağırılarak iki ana objeyi tek seferde döndürmek mümkün.
- Butonların yanına "Listeye Ekle" yazısıyla yeni bir buton ekleniyor.
- 30:29Action ve Selektör Kullanımı
- Actionlardan "liste dispatch ekle" çağrısı yapılıyor.
- Dispatch ile birlikte counter'ın yüz değeri ve ekranda gösterilen sayı listeye gönderilmesi planlanıyor.
- Uygulamanın içinde her yerden global state'e erişim ve müdahale imkanı bulunuyor.
- 32:19Alternatif Kütüphaneler ve Kapanış
- Redux'un alternatif olarak MobX ve React Context yapısı bulunuyor.
- Redux, global state için dünya genelinde en çok kullanılan paket olup 5,5 milyon indirmeye sahip.
- Video, ileri seviye konularda Türkçe anlatım isteklerini yorumlarda belirtme çağrısıyla sonlanıyor.