folder Tahribat.com Forumları
linefolder Html - CSS - XML - JavaScript - Ajax
linefolder Nodejs Ve Redux İle Todo App Uygulamasi



Nodejs Ve Redux İle Todo App Uygulamasi

  1. KısayolKısayol reportŞikayet pmÖzel Mesaj
    dhmm
    dhmm's avatar
    Kayıt Tarihi: 15/Eylül/2011
    Erkek

    Selam arkadaslar

    NodeJS, Redux, Express, EJS, Materialize ile ornek olarak gelistirdigim ufak uygulamami paylasmak istiyorum.

    Ilgilenen arkadaslar inceleyebilirler. Sorusu olan olursa bildigimce elimden geldigince vakit buldukca cevaplamaya calisirim.

    Link : https://github.com/dhmm/NodeRedux

    Kolay gelsin

     

    nodereduxtodo app image

     

     

     


    🌌 Deniz kiyisina gidip... Yapayalniz dalgalari saatlerce seyretmek istiyorum.... 🌌
  2. KısayolKısayol reportŞikayet pmÖzel Mesaj
    garga
    garga's avatar
    Kayıt Tarihi: 29/Temmuz/2002
    Erkek

    guzel... (gorunuyor)

    nerde yazdin ? (notepad :P)

    nasil calistiracaz bunu, servere mi koyacaz, napcaz ? - ben cok geri kaldim mq :( -


    anca gidersin...
  3. KısayolKısayol reportŞikayet pmÖzel Mesaj
    end
    end's avatar
    Kayıt Tarihi: 16/Ekim/2016
    Erkek

    Auth?


    0x0480 takilin madem
  4. KısayolKısayol reportŞikayet pmÖzel Mesaj
    dhmm
    dhmm's avatar
    Kayıt Tarihi: 15/Eylül/2011
    Erkek
    garga bunu yazdı

    guzel... (gorunuyor)

    nerde yazdin ? (notepad :P)

    nasil calistiracaz bunu, servere mi koyacaz, napcaz ? - ben cok geri kaldim mq :( -

    :) vscode ile yazdim. 

    Pcye indir hocam. Sonra root dizinde command line ac

    npm install

    npm run dev

    Calistir

    Nodejs yuklu olmalidir


    🌌 Deniz kiyisina gidip... Yapayalniz dalgalari saatlerce seyretmek istiyorum.... 🌌
  5. KısayolKısayol reportŞikayet pmÖzel Mesaj
    dhmm
    dhmm's avatar
    Kayıt Tarihi: 15/Eylül/2011
    Erkek
    end bunu yazdı

    Auth?

    Middleware yok hocam orneklik bisey sadece.

    Ama eklenebilir kolayca.


    🌌 Deniz kiyisina gidip... Yapayalniz dalgalari saatlerce seyretmek istiyorum.... 🌌
  6. KısayolKısayol reportŞikayet pmÖzel Mesaj
    RockZs
    RockZs's avatar
    Kayıt Tarihi: 30/Haziran/2002
    Erkek

    En çok redux kullanman dikkatimi çekti. Böyle bir uygulamada ve genel olarak Redux ne işe yarıyor? Daha önce hiç state management library kullanmadım. Kısaca bahsedebilisen memnun olurum.

  7. KısayolKısayol reportŞikayet pmÖzel Mesaj
    dhmm
    dhmm's avatar
    Kayıt Tarihi: 15/Eylül/2011
    Erkek
    RockZs bunu yazdı

    En çok redux kullanman dikkatimi çekti. Böyle bir uygulamada ve genel olarak Redux ne işe yarıyor? Daha önce hiç state management library kullanmadım. Kısaca bahsedebilisen memnun olurum.

    Redux state management kutuphanesidir hocam. Genellikle React , React nativede kullanilir. Uygulalamiz buyudukce state yonetimi oldukca karmasik bir hal almaya baslar. İste bu noktada reduz bizlere centralized management secenegi sunar. Tum statelerimiz "store" icine kaydedip istedigimiz anda ulasabiliriz. 

    İsin guzel tarafi SPA uygulamalarda sayfayi refresh edersen bilgiler kaybolmaz.


    🌌 Deniz kiyisina gidip... Yapayalniz dalgalari saatlerce seyretmek istiyorum.... 🌌
  8. KısayolKısayol reportŞikayet pmÖzel Mesaj
    end
    end's avatar
    Kayıt Tarihi: 16/Ekim/2016
    Erkek
    dhmm bunu yazdı
    RockZs bunu yazdı

    En çok redux kullanman dikkatimi çekti. Böyle bir uygulamada ve genel olarak Redux ne işe yarıyor? Daha önce hiç state management library kullanmadım. Kısaca bahsedebilisen memnun olurum.

    Redux state management kutuphanesidir hocam. Genellikle React , React nativede kullanilir. Uygulalamiz buyudukce state yonetimi oldukca karmasik bir hal almaya baslar. İste bu noktada reduz bizlere centralized management secenegi sunar. Tum statelerimiz "store" icine kaydedip istedigimiz anda ulasabiliriz. 

    İsin guzel tarafi SPA uygulamalarda sayfayi refresh edersen bilgiler kaybolmaz.

    Bu app icin direkt kendin ramde de tutabilirdin datayi?

    Redux da ayni isi yapmiyor mu zaten?

    Kendisi kapanirsa veri ramden silinecek her turlu. 


    0x0480 takilin madem
  9. KısayolKısayol reportŞikayet pmÖzel Mesaj
    dhmm
    dhmm's avatar
    Kayıt Tarihi: 15/Eylül/2011
    Erkek
    end bunu yazdı
    dhmm bunu yazdı
    RockZs bunu yazdı

    En çok redux kullanman dikkatimi çekti. Böyle bir uygulamada ve genel olarak Redux ne işe yarıyor? Daha önce hiç state management library kullanmadım. Kısaca bahsedebilisen memnun olurum.

    Redux state management kutuphanesidir hocam. Genellikle React , React nativede kullanilir. Uygulalamiz buyudukce state yonetimi oldukca karmasik bir hal almaya baslar. İste bu noktada reduz bizlere centralized management secenegi sunar. Tum statelerimiz "store" icine kaydedip istedigimiz anda ulasabiliriz. 

    İsin guzel tarafi SPA uygulamalarda sayfayi refresh edersen bilgiler kaybolmaz.

    Bu app icin direkt kendin ramde de tutabilirdin datayi?

    Redux da ayni isi yapmiyor mu zaten?

    Kendisi kapanirsa veri ramden silinecek her turlu. 

    Hocam maksat reduxu ornekle gostermek :)


    🌌 Deniz kiyisina gidip... Yapayalniz dalgalari saatlerce seyretmek istiyorum.... 🌌
  10. KısayolKısayol reportŞikayet pmÖzel Mesaj
    yabadabadoo
    yabadabadoo's avatar
    Kayıt Tarihi: 15/Temmuz/2019
    Erkek

    Reduxun olayi bilgiyi nerede, ne formatta tuttugu degil. Redux bir felsefedir. Kod bakimindan pek onemsizdir, ve zaten birkac kb anca kaplamaktadir. Reduxun iyi yani, programi kolayca denetlenebilir yapmasi, buglardan korumasi ve zamanda geri yolculuk ozelligi.

    Redux der ki, bir degiskenimiz var, buna store diyelim. Programdaki butun veri bu degiskenin icinde JSON formatinda saklanir. Yani, hangi sayfanin acik oldugu, ekranda gorunen butun yazismalar, butun resmler, yazilar store isimli objenin altinda saklanir.

    Durum boyle olunca, herhangi bir anda programin verisine erisiminiz vardir. Diyelim 3 sn 23 ms once boslukta ne yaziyordu diye bakmak icin storeun o anki kopyasina bakabilirsiniz. Buna zamanda geri yolculuk deniyor. Redux dev tools kullanarak yaparsiniz.

    Reduxun tanimladigi en onemli fonksiyonlar sunlar:

    1. dispatch: veriyi degistirmek icin

    2. getState: veriye erismek icin

    Bu kadar basit. Bu haliyle cok çöp bir kutuphaneye benziyor, ama Reduxu redux yapan kisima gecmedik daha.

    Reduxun felsefesi:

    1. Butun veri tek bir degisken altinda saklanir. Bu ozelligiyle react in dagitilmis state akimina terstir. Bu yuzden redux kullaniyorsak reactin state ini hic ellemiyoruz.

    2. Veriyi degistirmek icin belki fonisiyonlar tanimliyoruz. Ornegin mesaj geldiginde mesajlar dizisini guncellemek icin ( yeniMesaj, store ) => ( store ) imzali fonksiyon yaziyoruz. Bu fonksiyonlarin parametrelerinden biri hep storedur, ve cikti olarak hep storeun guncellenmis halini verir. Redux da o yeni storeu alir, eskisini siler, yenisini yerine koyar. Bu fonksiyonlara reduxça "reducer" diyoruz. Boylece, bugun hangi reducerden kaynakli oldugunu, zamanda yolculuk yaparak rahatça tespit edebiliriz.

    3. Reducerleri direk tetiklemiyoruz. Yani reducer(...) seklinde cagirmiyoruz. Yerine dispatch kullaniyoruz. Dispatche parametre olarak her zaman bir obje atiyoruz. butun parametreler bu objenin icinde duracak. Reducerler de bu objeyi parametre seklinde alacak. Bu dispatchin icine koydugumuz objeye reduxça "action" diyoruz.

    4.Her actionda olmasi gereken bir alan vardir. Bunun adi "type". Programda olacak her degisiklige isim koyuyoruz. Ornegin yeni mesaj geldiginde type: "yeni mesaj geldi" olabilir. Bir alana bir harf girildiginde "alan guncellendi" isimli bir type olabilir. 

    Orn ali online olunca

    dispatch( { type: "onlineOldu", kim: "ali" } )

    Reducerimiz de su sekilde

    ( store, action) => {

    if action.type = onlineOldu

    store.onlineListesi [ action.kim ] = true

    return store

    }

     

    Not: ustteki ornekte storeun uzerini direk degistiriyorum. Redux buna musaade etmez. Bu yuzden redux kullanacagimiz zaman Immer kutuphanesini, ya da EasyPeasy kutuphanesini kullaniyoruz.

     

    Simdi, gordugumuz ozere redux reacttan tamamen bagimsiz bir kutuphanedir. Bu sekliyle her hangi bir framework yaninda kullanilabilir. Fakat, kimseyi kandirmayalim, reduxu kullanan cogu insan react kullaniyor. Reduxu react ile birlikte kullanmak icin "react-redux" kutuphanesini kullaniyoruz. Bu kutuphaneyi de soyle ozetleyelim:

    - reduxtaki dispatch ve getState i muhtemelen componentlerin icinden cagiracagiz. Bu yuzden bu iki fonksiyonun component icinden cagirilabilir olmasini istiyoruz. Hatta mumkunse, getState yerine direk store a erismek istiyoruz. Bu kutuphane ile, birazdan gosterecegim yontemle dispatch ve store componente props.dispatch ve props.storeVerisi seklinde gelecek.

    componentimizi yazdik, export ile disari verecegiz diyelim. export ile componentin kendisini degil de, degistirilmis bir versiyonunu disari verecegiz. Bunun icin connect fonksiyonu var.

    connect fonksiyonu birazdan anlatacagim parametreleri alir, bir fonksiyon verir. Daha sonra bu fonksiyonu alip icine parametre olarak componentimizi koyup cagiriyoruz. Geri bu sefer degistirilmis component aliyoruz ve export ile gonderiyoruz.

    connect parametre olarak 4 fonksiyon alir, bunlardan en onemlisi birinci parametre, digerlerini bos biraksak da olur. Bu fonksiyona react-reduxça "mapStateToProps" denir.

    Bunun gorevi, store objesini propslara hangi isimle koymak istedigimizi belirtmemizdir. ( store ) => ( obje ) seklindedir. bu objenin alanlari, ayni isimle propsun icine aktarilir. Ornek kullanim

    class Dugme ( .... ) { .... }

    function mapstatetoprops (store) {

    return { renk: store.butonRengi }

    }

    export connect(mapstatetoprops)(Dugme)

     


    Buraya daha sonra ozlu bir soz girilecek
Toplam Hit: 570 Toplam Mesaj: 10
nodejs redux