React Redux ile thunk middleware kullanarak API'dan veri almak

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ธ.ค. 2024

ความคิดเห็น • 66

  • @shahmalimustafayev6297
    @shahmalimustafayev6297 2 ปีที่แล้ว

    Tesekkurler hocam reduxu sizin sayenizda daha da anliyorum

  • @umityasarturk6424
    @umityasarturk6424 3 ปีที่แล้ว

    Hocam redux'ı sizin sayenizde daha iyi anlamaya başladım teşekkürler.

  • @tburakdemir
    @tburakdemir 4 ปีที่แล้ว

    müthiş anlatım ağzınıza sağlık. bugün attığınız videoda ileride videosunu çekmek istediğiniz konular hakkında konuştunuz. benim de bir önerim olucak. Bu video yanına bir de redux-saga anlatırsanız çok iyi olur.

    • @ReactDersleri
      @ReactDersleri  4 ปีที่แล้ว +1

      redux-saga ile hiç çalışmadım. En önemli özelliğinin action'lara abone olup, bir action gerçekleştiğinde ona cevap olarak başka bir action tetikleyebilmesi olduğunu biliyorum. Bir de generator fonksiyonlar kullanılan bir sistem olduğu için bana çok yabancı geliyor. Bir gün kullanırsam muhakkak videosunu da yaparım 👍

  • @olcaykaplan1647
    @olcaykaplan1647 4 ปีที่แล้ว +1

    Güzel bir anlatım olmuş, teşekkürler.

  • @yildiz12321
    @yildiz12321 3 ปีที่แล้ว +1

    Çok teşekkürler hocam...

  • @ahmetbasdan53
    @ahmetbasdan53 4 ปีที่แล้ว +1

    Çok değerli bir paylaşım. Bir sorum olacak state yönetimi için projedeki tüm api crud işlemlerini redux tarafındamı yapmam gerekiyor? yoksa sadece birden fazla yerde bağlantılı olan statelerin api işlemlerinimi burda yapmalıyım ?
    Tekrandan bu değerli paylaşım için teşekkürler

    • @ReactDersleri
      @ReactDersleri  4 ปีที่แล้ว +1

      Global state içinde tuttuğunuz tüm verilerin CRUD işlemlerini Redux action olarak tanımlayabilirsiniz.

  • @imran22js
    @imran22js 3 ปีที่แล้ว

    Salam Hocam dersiniz cok iyi. peki post ve put methodlarini kullanarak api - ye nasil bilgi gondeririz? Buna dair video derslerde hazirlarsaniz cok iyi olur. Tesekkur ederim

  • @mertgenc9890
    @mertgenc9890 3 ปีที่แล้ว

    hocam bir de saga'yı anlattıgınız bir video gelir mi? çok merak ediyorum farklarını

  • @kenansari
    @kenansari 4 ปีที่แล้ว

    Degerli Hocam, Videolarinizi severek takip ediyorum, Bilgilerinizi comertce paylastiginiz icin cok tesekku r ederim. Aklima takilan birsey oldu, izniniz olursa sormak istiyorum. Artik yeni nesil guncel react yazarken Life cyclelar yani Reacct yasam donguleri pek kullanilmiyor mu ? hani bu componentDidMountt'lar vs , biliyorum ki dokumantasyonda componentWillUpdate() ve
    componentWillReceiveProps() artik guvenli degil tavsiye edilmez kullanilmasi yaziyor. digerleri icin de durum artik ayni mi? Yani hooklar geldi artik lifecycle 'larin papucu damami atildi tabiri caizse. Ya da ben olayin cok mu baska bir tarafindayim ve bu yuzden anlayamadim mi ? cunku siz yazarken pek goremedim yada benim dikkatimden kacmis olmali. Aslinda kullanilmamasi cok isime gelir. Niye derseniz bir turlu mantiklarini kavrayamadim. Tabi benim zaten basklarina gore anlama hizim dusuk normalde maalesef bununda etkisi var. Udemy'den kurs aldim bitirdim yine anlayamadim. Aydinlatabilriseniz cok sevinirim degerli hocam. Saygilarimla Kenan SARI

    • @ReactDersleri
      @ReactDersleri  4 ปีที่แล้ว +5

      componentDidMount, componentDidUpdate, componentWillUnmount fonksiyonları hala geçerli eğer class component kullanıyorsanız. Bunların karşılığı function component kullanırken useEffect hook'u oldu. useEffect videosunda karşılaştırmalı anlatmamın sebebi o. Eskiden component eğer state alacaksa veya yaşam döngülerine erişimi olacaksa class component olarak yazılıyordu. Hooklar sayesinde function component olarak yazılabiliyor. Birçok geliştirici için function component kullanımı daha kolay ve anlaşılır. Tercih meselesi. Güvenli olmayanlar, kullanım alanı çok az yahut hiç olmayan fonksiyonlar. React'ın kendi dökümantasyonunda bir şey depreciated olmuşsa öğrenmekle uğraşmanıza gerek yok.

    • @kenansari
      @kenansari 4 ปีที่แล้ว

      @@ReactDersleri Degerli Hocam cok tesekkur ederim, Saygilarimla Iyi haftasonlari

  • @Raihell
    @Raihell 2 ปีที่แล้ว

    apiden belli bir parametreye göre çağrı yapacaksak ne yapmamız gerekiyor

  • @hbaduk
    @hbaduk 3 ปีที่แล้ว +1

    Teşekkürler hocam

  • @emre-rx9oo
    @emre-rx9oo 3 ปีที่แล้ว

    Hocam aklıam takılan birkaç bir şey var başka kaynaklarda connect yapısı yerine useselector ve usedispatch yapısı kullanıldığını daha sık görüyorum bu ikisinin ciddi bir farkı varmı , yoksa ben konuyu yanlışmı anladım acaba , birde özellikle yabancı videolarda redux-toolkit i çok kullanıyolar ama createslice vb kafamı karıştırdı biraz sizce kullanmak mantıklı , teşekkür ederim

    • @ReactDersleri
      @ReactDersleri  3 ปีที่แล้ว

      Fark yok. Birisi daha eski, class component’lara daha uygun, digeri ise ayni isin hook ile yapilisi.

  • @burakk7830
    @burakk7830 3 ปีที่แล้ว

    Ufak bir gözden kaçırmayla bende şöyle bir hata oluştu diğer arkadaşlarda da olabilir düşüncesiyle yazmak istedim.
    (Muhtemelen hocamız Hooks playlistinde anlatmıştır ben henüz izlemediğimden gözden kaçırdım)
    useEffect kullanırken kodda yazılan [ ] kısmını yazmayı unutursak, useEffect sürekli çalışıyor ve sürekli olarak API sorguluyor böylece devamlı yükleniyor yazısı ve bayraklar gelip gidiyor.
    Şu syntaxa dikkat etmek gerekiyor: useEffect(sideEffectFunction, [stateToTrack])
    stateToTrack kısmı useEffect in bir sonraki render için state de hedeflediği değişken.
    Burada boş array bırakınca useEffect sadece bir kez çalışıyor.
    Hocam eğitimler için çok teşekkürler. Tam react öğrenirken vue.js üzerine bir arayüz düşüncesi doğdu şirkette hazır bu yorumu yapmışken vue.js konusundaki fikrinizi de alabilir miyim? çeşitli blog yazılarında vue.js in react a göre küçük projeler için daha hızlı ve performanslı olduğu söylenmiş fakat kimileri de bu yoruma karşı çıkmış. Aslında vereceğiniz cevabı az çok tahmin edebiliyorum: Sen projende ne yapmak istiyorsun ve ne kullanmak istiyorsuna paralel bir cevap bekliyorum :)
    Bir de kariyer tavsiyesi özelinde bir soru sormak istiyorum kanalın bir mail adresi var mıdır? Anonim kaldığınızdan linkedin bulamadım :)

    • @ReactDersleri
      @ReactDersleri  3 ปีที่แล้ว +2

      useEffect videosunda dependency array konusundan bahsetmiştik, yeniden hatırlattığın için teşekkürler.
      Vue.js konusunda karşılaştırma yapamam çünkü hiç kullanmadım. Ancak takipçilerin benim bakış açımı anlamış olmaları sevindirdi açıkçası 😄 Eğer proje küçükse hangi teknolojiyi kullandığınızın çok da bir önemi olacağını sanmıyorum. Herkesin her dediğine bakarsak oturup iki satır kod yazamayız 🙂

  • @TeyfikErenEREZ
    @TeyfikErenEREZ 4 ปีที่แล้ว +1

    Yeniden Merhaba,
    Şuana kadar react ile istediğim her şeyi yaptım. Sadece jwt authentication nasıl yapılır? Bu konu hakkında video hazırlamayı düşünüyor musunuz? Kendi apime bağlanıp, jwt authentication kontrolü yapmak istiyorum. Başka kaynaklarda bir çok alternatif bulsamda, sizden öğrenmek daha iyi olurdu.
    İyi günler :)

    • @ReactDersleri
      @ReactDersleri  4 ปีที่แล้ว +1

      Teyfik Eren EREZ JWT veren API’niz var mi?

    • @TeyfikErenEREZ
      @TeyfikErenEREZ 4 ปีที่แล้ว

      @@ReactDersleri evet.

  • @oguzhan2393
    @oguzhan2393 ปีที่แล้ว

    güzel video

  • @ugursinansagroglu3132
    @ugursinansagroglu3132 4 ปีที่แล้ว

    Hocam dökümantasyondan çok sizin anlatımınızı daha iyi anlayabilme sebebim ingilizcemin yetersizliği. Bu ingilizceyi nasıl yapmak gerek? Okuyorum anlıyorum ancak bir eksik var verimli anlayamıyorm ingilizce okuduğumda.. Yani ingilizce okuyup anlayamayan biri de değilim ancak sanki bazı ağır konularda eksik kalıyor ingilizcem.
    Bu arada çok başarılı bir ders olmuş. Curry fonksiyonları dispatch i 2 adet arrow ile göstermeniz aklımdaki büyük bir sorunu çözdürdü bana.

    • @ReactDersleri
      @ReactDersleri  4 ปีที่แล้ว

      İngilizce konusunda tavsiye veremeyeceğim :) Ben elimden geldiğinde kelimeleri anlamlarıyla vermeye çalışıyorum ki belki daha iyi anlaşılır diye. Üzerinde çalıştıkça daha iyi yerleşecektir diye ümit ediyorum.

  • @onursoftware5922
    @onursoftware5922 4 ปีที่แล้ว

    Birkaç kaynaktan da baktım ancak tam tatmin edici bir cevap bulamadım. class component ile function component arasındaki fark nedir ? Mesela hangi durumlarda hangisini tercih etmeliyiz ?

    • @ReactDersleri
      @ReactDersleri  4 ปีที่แล้ว +1

      onur software syntax disinda bir fark yok. Her ikisini de her durumda kullanabilirsiniz. Hook’lar gelmeden once functional components icinde state olusturamiyordunuz. Artik oyle bir durum yok.

    • @onursoftware5922
      @onursoftware5922 4 ปีที่แล้ว

      @@ReactDersleri Aynen, useEffect ve state ile lifecycle ve state'e erişim var. Ama bazı yerlerde soruluyor diye yazdım. Teşekkürler, bu arada anlatımınızı çok beğendim.

    • @ReactDersleri
      @ReactDersleri  4 ปีที่แล้ว

      React'e yeni baslayanlardan arkadaslarin genelde bu konuda kafasi karisik. Daha acik nasil anlatilabilir bilmiyorum. Hooklardan sonra hicbir fark kalmadi arada.

    • @onursoftware5922
      @onursoftware5922 4 ปีที่แล้ว

      @@ReactDersleri Aynen öyle, Teşekkürler : )

  • @TeyfikErenEREZ
    @TeyfikErenEREZ 4 ปีที่แล้ว

    Merhaba,
    Kanalınızda izlemediğim sadece 2-3 video kaldı :) Başka kaynaklardan da bilgi edindim. Bir proje yapmaya çalışıyorum. Bende birden çok reducers var. Sizinle aynı işlemleri yaptığım halde, aynı sonucu alamıyorum. Apiden useEffect ile veri çekip, useState ile veriyi aktarınca çalışıyor. Yalnız action ve reducers ile yapınca veriyi çekemiyorum. Baya üstüne uğraştım. İşin içinden çıkamadım. Birden çok reducers olan ve apiden veri çeken bir video paylaşma ihtimaliniz var mı? Geri kalan herşeyi sanırım çözdüm. Bunu da öğrenirsem, ilk react projemi yazmaya başlayacağım.
    İyi günler.

    • @ReactDersleri
      @ReactDersleri  4 ปีที่แล้ว +1

      Aldığınız hata nedir?

    • @TeyfikErenEREZ
      @TeyfikErenEREZ 4 ปีที่แล้ว

      @@ReactDersleri undefined olarak geliyor.
      Action kodum:
      import * as actionTypes from "./actionTypes";
      import Axios from "axios";
      export const Getir = () => (dispatch) => {
      Axios.get("api.solidworksturkiye.com/api/users")
      .then((response) =>
      dispatch({ type: actionTypes.GET_GETIR_SUCCESS, payload: response.data })
      )
      .catch((error) =>
      dispatch({ type: actionTypes.GET_HATA_ERROR, payload: error })
      );
      };
      reducer kodum:
      import * as actionTypes from "../actions/actionTypes";
      const baslangic = { users: [], message:'' };
      export default function GetirReducer(state = baslangic, action) {
      switch (action.type) {
      case actionTypes.GET_GETIR_SUCCESS:
      return { ...state, users: action.payload };
      case actionTypes.GET_HATA_ERROR:
      return { ...state, message: action.payload };
      default:
      return state;
      }
      }

    • @ReactDersleri
      @ReactDersleri  4 ปีที่แล้ว

      Birden cok reducer var dediniz, onları combineReducer ile birleştirdiniz mi? Undefined geliyorsa mapStateToProps içinde state’in tamamını proplara yazdırıp axios ile verinin getirilip state’e kaydedildiğinden emin olun. Ya veri api’den gelmiyor, ya da siz veriyi state’e kaydetmenize rağmen referans gösterirken arada bir şey atlıyorsunuz.

    • @TeyfikErenEREZ
      @TeyfikErenEREZ 4 ปีที่แล้ว

      @@ReactDersleri reducerları birleştirdim. Apiden veri çekmek dışında kanalınızdaki tüm eventleri, aklıma gelen herşeyi denedim, çalıştırdım. Apiyi ise useEffect ve useState ile çekebiliyorum. Sadece GetirReducer kısmı apiden çekiyor. Diğerleri api dışında yaptığım örnekler. Sadece apide takıldım. Bide ben state kısmını reducer yazıp, çekiyorum. 18:30'dan beri api kısmını çözemedim:S Olmazsa sadece apiyi içeren bir kodu codesandboxa yükleyim. Ordan bakınca, hatamı göstebilir misiniz?
      const mapStateToProps = (state) => {
      return {
      currentCategory: state.changeCategoryReducer,
      deneme: state.changeProductReducer.kutu,
      counter: state.ArtirReducer,
      users:state.GetirReducer
      };
      };
      export default connect(mapStateToProps, { Artir, Getir })(Navi);

    • @ReactDersleri
      @ReactDersleri  4 ปีที่แล้ว +1

      mapStateToProps içinde return’den hemen önce console.log(state) yapın ve o component yüklendiğindeki state’in ne olduğuna bakın, yardımcı olacaktır. combineReducer yaptıysanız state.artirReducer demenize gerek yok, onlar zaten tek bir state altında birleşmesi gerekir. Ya da kurulumu yaparken siz o kısmı eksik bıraktınız. Şu adresteki dokümantasyonu dikkatlice inceleyin: redux.js.org/api/combinereducers

  • @metinkarac1899
    @metinkarac1899 3 ปีที่แล้ว

    Hocam merhaba
    Bir sorunum var da yardımcı olabilrseniz çok sevinirim.
    redux thunk ve useEffect kullanarak API sorgusunda bir liste döndüren ve bunu ekranda yazdıran bir yapım var.
    Soun şu ki
    yeni eleman ekleme sayfasında eleman ekliyorum.
    akabinde eleman listesi sayfasına navigate oluyorum.
    fakat navigate olduktan sonra eklediğim eleman sayfada görünmüyor. kodum aşağıdaki şekilde.
    İstiyorum ki eleman eklediğimde yeni eleman hemen sayfada görünsün.
    (
    1- ikinci parametre olarak componentteki data propsunu kullandığımda bilgisayr kasyıor react yavaş çalışıyor.
    2- ikinci parametreyi komple sildiğimde bu sefer sürekli API ye istek gönderiyor program yine kasıyor..
    )
    const OrnekComponent=({data})=>{
    useEffect(() => {
    dispatch(getCustomers());
    };
    }
    }, [dispatch,]);
    }

    • @ReactDersleri
      @ReactDersleri  3 ปีที่แล้ว

      State guncellenmiyordur, ya da siz guncel state’i bir sekilde component’a yansitamiyorsunuzdur. Mevcut kodlardan bir sey anlayamadim acikcasi. Acilse projenin github linkini paylasabilirsiniz veya problemli kismi codesandbox’da yeniden uretip paylasabilirsiniz.

  • @huseyincuma9523
    @huseyincuma9523 3 ปีที่แล้ว

    teşekkürler

  • @arthurdavinskiy8357
    @arthurdavinskiy8357 2 ปีที่แล้ว

    why do you use that font in editor ?

  • @simge5698
    @simge5698 3 ปีที่แล้ว

    API çalışmıyor mu yoksa kodlarım da mı bir problem var anlayamadım ?

    • @ReactDersleri
      @ReactDersleri  3 ปีที่แล้ว +1

      restcountries.com diye güncellediler.

  • @marlonbrando80
    @marlonbrando80 4 ปีที่แล้ว

    İyide hocam bundan onceki redux dersleri demissiniz de bundsn once redux dersiniz yok ki

    • @ReactDersleri
      @ReactDersleri  4 ปีที่แล้ว

      Redux’a giriş, alışveriş sepeti, ve yapılacaklar listesi videoları bu videodan önce. Kanal sayfasından Video sekmesine girdiğinizde videoları kronolojik olarak görebiliyor olmanız gerekir.

    • @ReactDersleri
      @ReactDersleri  4 ปีที่แล้ว

      Playlist olarak açınca o listeye son eklenen video ilk göründüğü için bir karışıklık olmuş sanırım.

    • @marlonbrando80
      @marlonbrando80 4 ปีที่แล้ว

      Aaa doğru. Ozur dilerim hocam gördüm evet

  • @orhngazi
    @orhngazi 3 ปีที่แล้ว +1

    Çok güzel anlatmışsınız elinize sağlık.

  • @dotuidesign
    @dotuidesign 2 ปีที่แล้ว

    Teşekkürler