Forum
Aktif konular
Üyeler
Kurallar
Arama
Nodejs Ve Redux İle Todo App Uygulamasi Nodejs Ve Redux İle Todo App Uygulamasi
-
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
-
guzel... (gorunuyor)
nerde yazdin ? (notepad :P)
nasil calistiracaz bunu, servere mi koyacaz, napcaz ? - ben cok geri kaldim mq :( -
-
Auth?
-
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
-
end bunu yazdı
Auth?
Middleware yok hocam orneklik bisey sadece.
Ama eklenebilir kolayca.
-
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.
-
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.
-
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.
-
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 :)
-
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)
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla