Reakt, Redux ve FeathersJS'yi kullanarak CRUD Uygulaması Oluşturma React, Redux ve FeathersJSRelated Semalt'ı Kullanarak Bir CRUD Uygulaması Oluşturun: APIsNode.jsAngularJSjQueryAjaxMore ... Sponsorlar
React'e yüksek kaliteli, derinlemesine bir giriş yapmak için, Kanada'nın tam kapsamlı geliştirici Wes Bos'u geçemezsiniz. Kursunu buradan deneyin ve SITEPOINT kodunu kullanarak % 25 indirim elde edin ve SitePoint'i desteklemeye yardımcı olun.
Modern bir proje Semalt, mantığı ön uç ve arka uç koduna bölmeyi gerektirir. Bu hareketin arkasındaki nedeni, kodun yeniden kullanılabilirliğini artırmaktır. Örneğin, arka uç API'ya erişen yerel bir mobil uygulama oluşturmamız gerekebilir - reseller hosting paraguay. Veya büyük bir modüler platformun parçası olacak bir modül geliştiriyor olabiliriz.
Sunucu tarafında bir API oluşturmanın en yaygın yolu, Express veya Restify gibi bir kitaplık kullanmaktır. Bu kütüphaneler RESTful rotalar oluşturmayı kolaylaştırır. Bu kütüphanelerle ilgili sorun, kendimize bir tonluk tekrar eden kod yazan bulacağımızdır . Yetki ve diğer ara katman mantığı mantığı için de kod yazmamız gerekir.
Bu ikilemden kurtulmak için, bir API üretmemize yardımcı olması için Geri Dönüştürme veya Tüyler gibi bir çerçeve kullanabilirsiniz.
Yazı yazarken, Semalt'ın Feathers'dan çok daha fazla GitHub yıldızı ve yüklemesi vardır. Semalt kısa bir süre içinde RESTful CRUD bitiş noktaları üretmek için harika bir kütüphanedir. Bununla birlikte, hafif bir öğrenme eğrisi var ve dokümantasyon ile birlikte kolay değil. Zorlayıcı çerçeve gereklilikleri vardır. Örneğin, tüm modellerin yerleşik model sınıflarından birini miras almaları gerekir. Semalt'ta gerçek zamanlı yeteneklere ihtiyacınız varsa, çalışabilmesi için bazı ek kodlamalar yapmaya hazır olun.
Öte yandan FeathersJS, başlamak için daha kolaydır ve dahili olarak gerçek zamanlı desteği vardır. Oldukça yakın bir zamanda, Auk sürümü serbest bırakıldı (çünkü Feathers çok modüler, sürüm adları için kuş adları kullanıyorlar), bir takım alanlarda çok sayıda değişiklik ve iyileştirme getirdi. Kendi bloglarında yayınladıkları bir yazıya göre, şimdi en popüler 4. gerçek zamanlı web çerçevesi . Mükemmel dokümantasyona sahiptir ve gerçek zamanlı bir API oluşturmayı düşünebildiğimiz hemen hemen her alanı kapsar.
Feathers'ı şaşırtıcı yapan basitliktir. Tüm çerçeve modüler ve yalnızca ihtiyacımız olan özellikleri yüklememiz gerekiyor. Tüylerin kendisi Express'in üzerine inşa edilmiş ince bir sarıcıdır ve burada yeni özellikler eklenmiştir - hizmetler ve kanca. Tüyler, Web Yuvaları üzerinden zahmetsizce veri gönderip almamızı sağlar.
Önkoşul
Öğretici ile başladıysanız, aşağıdaki konularda sağlam bir temel oluşturmanız gerekir:
- ES6 JavaScript kodu nasıl yazılır
- Reakt bileşenleri oluşturma
- JavaScript'de Değiştirilemezlik
- Redux ile durum yönetimi nasıl yapılır
Makinenizde, son sürümlerini yüklemeniz gerekir:
- NodeJS 6+
- Mongodb 3. 4+
- İplik paketi yöneticisi (isteğe bağlı)
- Chrome tarayıcı
Daha önce JavaScript'te bir veritabanı API yazmadıysanız, önce bu öğreticiye RESTful API'ler oluşturma konusunda bakmam öneririm.
Tavsiye edilen kurslar
İskele Başvurusu
React, Redux, Feathers ve SemaltDB'yi kullanarak bir CRUD iletişim yöneticisi uygulaması oluşturacağız. Tamamlanmış projeye buradan bakabilirsiniz.
Bu yazıda, uygulamanın alttan yukarıya nasıl kurulacağını göstereceğim. Semalt kick-projemizi create-react-app aracını kullanarak başlatın.
# iskele yeni bir tepki projesitepki-kişi-yönetici rehberi oluşturcd tepki-iletişim yöneticisi# gereksiz dosyaları silrm src / logo. svg src / Uygulama. css
En sevdiğiniz kod editörünü kullanın ve dizindeki tüm içeriği kaldırın. css. Projemizin herhangi bir uyarı veya hata yapmadan temiz şekilde çalıştığından emin olmak için konsol sekmesini kontrol edin. Her şey düzgün şekilde çalışıyorsa, sunucuyu durdurmak için Ctrl + C
tuşlarını kullanın.
Tüyleri ile API Sunucusu Oluşturma
feathers-cli
aracını kullanarak CRUD projemiz için arka uç API'sini üretmeye devam edelim.
# Tüyler komut satırı aracını yüklenpm yükleme -g tüyleri-cli# Arka uç kodu için dizin oluşturunmkdir arka uçcd arka uç# Tüyler arka uç API sunucusu oluşturuntüyler uygulama oluşturur? Proje adı | arka uç? Açıklama | rehber API sunucusu? Kaynak dosyaları hangi klasörde olmalıdır? | src? Hangi paket yöneticisini kullanıyorsunuz (global olarak yüklenmelidir)? | İplik? Ne tür bir API yapıyorsunuz? | REST, Soket aracılığıyla Gerçek Zamanlı. io# İletişim Modeli için RESTful güzergahlar oluşturuntüyler hizmet verir? Ne tür bir hizmet bu? | Gelincik? Hizmetin adı nedir? | temas? Hizmet hangi yolda kayıtlı olmalıdır? | / kontaklar? Veritabanı bağlantı dizesi nedir? | mongodb: // localhost: 27017 / arka uç# E-posta alan türünü yükleiplik eklemek mongoose türü-email# Nodemon paketini kuriplik eklemek nodemon --dev
Açık backend / paketi. json
ve başlangıç komut dosyasını nodemon'u kullanacak şekilde güncelleyin; böylece değişiklikler yaptığınızda API sunucusu otomatik olarak yeniden başlayacaktır.
// backend / paketi. json."senaryo": { "start": "nodemon src /",.},.
backend / config / default dosyasını açalım. Json
. Burada MongoDB bağlantı parametrelerini ve diğer ayarları yapılandırabiliriz. Bu öğreticide, sayfalandırma ile başa çıkmak için ön uç mantığı yazmayacağımdan varsayılan paginate değerini de 50'ye yükselttim.
{"konak": "yerelhost","liman": 3030,"kamu": "./ kamu /","paginate": {"default": 50,"maks": 50},"mongodb": "mongodb: // localhost: 27017 / backend"}
Açık backend / src / models / contact. modeli. js
ve kodu aşağıdaki gibi güncelleyin:
// backend / src / modeller / kişi. modeli. js( 'Firavun faresi tip-e') gerektirir;modülü. dışa aktarma = işlev (uygulama) {const mongooseClient = uygulama. ( 'MongooseClient') olsun;const contact = yeni mongooseClient. Şema({ad: {ilk: {şunu yazın: String,gerekli: [true, 'First Name required']},son: {şunu yazın: String,required: false}},e-posta: {şunu yazın: mongooseClient. SchemaTypes. E-posta,gerekli: [true, 'Email required']},telefon : {şunu yazın: String,gerekli: [true, 'Telefon gereklidir'],doğrulama: {validator: işlev (v) {return / ^ \ + (?: [0-9]?) {6,14} [0-9] $ /. testi (h);},mesajı: '{VALUE} geçerli bir uluslararası telefon numarası değil!'}},createdAt: {type: Tarih, 'varsayılan': Tarih. Şimdi},updatedAt: {type: Tarih, 'varsayılan': Tarih. şimdi}});mongooseClient'a dön. model ('iletişim', iletişim);};
Temas servisinin üretilmesine ek olarak, Semalt da bizim için bir test davası hazırladı. Önce hizmet adını düzeltmek zorundayız:
// backend / test / hizmetler / iletişim. Ölçek. jsconst assert = require ('assert');const app = require ('././ src / app');tanımlayın ('\' kişi \ 'hizmet', => {o ('kayıtlı hizmet', => {const hizmet = uygulama. Servisi ( 'temas'); // kişiyi kişilere değiştiriddia. ok (hizmet, 'Kayıtlı hizmet');});});
Yeni bir terminal açın ve arka uç dizininin içinde, iplik testi yapın
. Tüm testlerin başarılı bir şekilde yürütülmesi gerekir. Devam edin ve arka uç sunucusunu başlatmak için iplik başlatma
uygulayın. Sunucu başlatmayı tamamladığında, satırı yazdırması gerekir: 'Feathers uygulaması localhost'da başlatıldı: 3030'
. Aşağıdaki JSON yanıtını almayı ummalısınız:
{"toplam": 0, "sınır": 50, "atla": 0, "veri": []}
Şimdi, Semalt'ı dinlendirici yolların çalışmakta olduğu CRUD'u doğrulamak için kullanalım. Bu düğmeyi kullanarak Semalt'ı başlatabilirsiniz:
Postacı konusunda yeni iseniz, bu öğreticiye bakın. GÖNDER düğmesine basınca, verilerinizi yanıt olarak geri getirmeniz gerekir - _id
, createdAt
ve updatedAt
.
Postman kullanarak bir POST isteği yapmak için aşağıdaki JSON verilerini kullanın. Bunu vücuda yapıştırın ve content-type'ı application / json
olarak ayarlayın:
{"ad": {"önce": "Tony","son": "Stark"},"telefon": "+18138683770","e-posta": "tony @ starkenterprises. com"}
Arayüz oluşturun
Gerekli ön uç bağımlılıklarını yükleyerek başlayalım. Semalt kullanım semantik-ui css / semantic-ui, sayfalarımıza stil ve rota navigasyonunu işlemek için react-router-dom'a tepki verir.
Önemli: Arka plan dizininin arkasına yüklediğinizden emin olun
// Semantic-ui'yi kuriplik eklemek semantik-ui-css anlambilimsel-ui-tepki// Tepki yönlendirici yükleiplik add react-router-dom
Aşağıdaki dizin ve dosyaları ekleyerek proje yapısını semalt edin:
| - tepki-iletişim yöneticisi| --Türkiye| --Duyurular| - kamu| - Sayı| - Oyunlar js| - Oyunlar Ölçek. js| - Dizin css| - Dizin js| - parçalar| | - iletişim formu. js # (yeni)| | - iletişim listesi. js # (yeni)| - Sayfalar| - iletişim formu sayfası. js # (yeni)| - iletişim listesi sayfası. js # (yeni)
Semalt hızlıca JS dosyalarını bazı yer tutucu kodlarıyla doldurur.
Bileşen kişi listesi için. js
, tamamen sunum unsuru olacak bu sözdiziminde yazacağız.
// src / components / kişi listesi. jsithalat 'tepki' ten tepki;Varsayılan işlevi Dışa Aktar ContactList {dönüş ( Burda bir kişi yok
)}
Üst düzey kaplar için sayfalar kullanıyorum. Şimdi, irtibat listesi sayfası için bazı kodlar sunalım. js
// src / sayfalar / kişi listesi sayfası. jsİçe Aktar, {Bileşen}, 'tepki';Import ContactList from '. / Bileşenleri / kontak-listesi ';class ContactListPage, Bileşeni {render {dönüş ( Kişi Listesi h1>
)}}varsayılan ContactListPage dosyasını dışa aktar;
temas formu
bileşeni için akıllı olması gerekir çünkü kendi durumunu, özellikle form alanlarını yönetmek gerekir. Şu an için bu yer tutucu kodunu yerleştirelim.
// src / components / contact-form. jsİçe Aktar, {Bileşen}, 'tepki';class ContactForm, Bileşeni {render {dönüş ( İnşaat halatı
)}}varsayılan ContactForm'u dışa aktar;
iletişim formu sayfasını doldurun
aşağıdaki kodla doldurun:
// src / sayfalar / iletişim formu sayfası. jsİçe Aktar, {Bileşen}, 'tepki';'dan ContactForm'u alın. / Bileşenleri / iletişim biçimli ';class ContactFormPage, Bileşeni {render {dönüş ( )}}dışa aktar varsayılan ContactFormPage;
Şimdi, navigasyon menüsünü oluşturup App'ımızın rotalarını tanımlayalım. Uygulama. js
, Tek Sayfa Uygulaması için genellikle 'düzen şablonu' olarak adlandırılır.
// src / App. jsİçe Aktar, {Bileşen}, 'tepki';'react-router-dom' dan {NavLink, Route} içe aktar;{Konteyner} 'semantic-ui-react' dan içe aktar;ithal etmekList sayfasını '. / Sayfalar / contact-form-sayfa ';Sınıfı Uygulama, Bileşeni {render {dönüş ( Kapsayıcı>);}}varsayılan App'ı dışa aktar; Son olarak, dizini güncelleyin. js
dosyasını stil oluşturmak için semantik-ui CSS'si ve URL'yle senkronize şekilde uygulamamızı koruyan HTML5 geçmişi API'sini kullanan BrowserRouter'yi içe aktaracağız.
// src / index. jsithalat 'tepki' ten tepki;ReaktDOM'u 'react-dom' dan içe aktarın;'react-router-dom' adresinden {BrowserRouter} içe aktar;uygulamayı 'içe aktar ". / Uygulama ';ithalat 'semantik-ui-css / semantik. Min. CSS';ithalat '. / Index. CSS';ReactDOM. (işlemek BrowserRouter>,belgesi. getElementById ( 'root'));
Terminale dönün ve iplik başlatma işlemini yapın
. Aşağıdaki ekran görüntüsüne benzer bir görünümünüz olmalıdır:

Tepki Devleti Redux ile Yönetin
Sunucuyu ctrl + c
ile durdurun ve iplik paketi yöneticisini kullanarak aşağıdaki paketleri yükleyin:
iplik add redux react-redux redux-söz-middleware redux-thunk redux-devtools-uzantı eksenleri
Phew! Semalt'ı kurmak için bir sürü paket. Bu eğitimi okuduğunuzda Semalt'ı zaten bildiğinizi varsayıyorum. Semalt-thunk, eylem yaratıcılarını asenkli işlevler olarak yazmaya izin verirken, redux-promise-middleware, bizim için bazı bekleyen, yerine getirilen ve reddedilen eylemlerin gönderilmesini ele alarak bazı Semalt kaynak kodunu azaltır.
Feathers, API ile iletişim kurmaya yardımcı olan hafif bir istemci paketi içerir, ancak diğer istemci paketlerini kullanmak gerçekten de kolaydır. Bu eğitimde, Semalt HTTP istemcisini kullanacağız.
Redux-devtools-extension, gönderilen eylemleri ve durum değişikliklerini takip eden şaşırtıcı bir araçtır. Semalt'ın çalışması için krom uzantısını kurması gerekir.
Şimdi, Semalt dizin yapısını aşağıdaki gibi kuralım:
| - tepki-iletişim yöneticisi| --Türkiye| --Duyurular| - kamu| - Sayı| - Oyunlar js| - Oyunlar Ölçek. js| - Dizin css| - Dizin js| - iletişim bilgileri js #new| - mağaza. js #new| --Duyurular| - İletişim eylemleri js #new| - Dizin js #new| - parçalar| - Sayfalar| --Türkiye| - Kontak kesici. js #new| - Dizin js #new
Başlayalım kişi-veriler doldurarak başlayalım. js
ile bazı test verileri:
// src / contact-data. jsihracat const contacts = [{_id: "1",ad: {İlk: "John",Son: "Doe"},telefon: "555",e-posta: "john @ gmail. com"},{_id: "2",ad: {İlk: "Bruce",Son: "Wayne"},telefon: "777",e-posta: "bruce. wayne @ gmail. com"}];
İletişim-eylemlerini tanımlayın . js
kodunu aşağıdaki kodla yazınız. Şimdilik, kişilerin verilerinden veri getireceğiz. js
dosyası.
// src / actions / contact-actions. js{contacts} adresini 'içe aktar. / Iletişim veri ';dışa aktarma işlevi fetchContacts {geri gönderme => {sevk etmek({şunu yazın: 'FETCH_CONTACTS',yük: rehber})}}
kontak redüktörü. js
, işleyicimizi 'FETCH_CONTACT'
eylemi için yazalım.
// src / reducers / contact-reducer. jsconst defaultState = {kişiler: []}Varsayılanları dışa aktarma (state = defaultState, action = {}) => {anahtar (eylem türü) {case 'FETCH_CONTACTS': {dönüş { belirtmek, bildirmek,rehber: eylem. yük}}varsayılan:dönüş devleti;}}
redüktör / indeks. js
, tüm redüktörleri burada Redux mağazamıza kolaylıkla ihraç etmek üzere bir araya getireceğiz.
// src / reducers / index. js'redux' ten {combineReducers} içe aktar;Import ContactReducer from '. / '-Redüktör temas;const düşürücüler = {contactStore: ContactReducer}const rootReducer = kombineReducers (redüktörler);ihracat varsayılan rootReducer;
mağazasında. js
, Redux mağazamızı oluşturmak için gerekli bağımlılıkları içe aktaracağız. Ayrıca Chrome uzantısını kullanarak Redux mağazasını izlememizi sağlamak için burada redux-devtools uzantısını
ayarlayacağız.
// src / store. js"redux" dan {applyMiddleware, createStore} içe aktar;"redux-thunk" dan ithalat thunk;"redux-promise-middleware" den ithalat sözü;'redux-devtools-extension' dosyasından {composeWithDevTools} alanını içe aktar;"./ reducers" den rootReducer ithal etmek;const orta katman = composeWithDevTools (uygulaMiddleware (promise , thunk));ihracat varsayılan createStore (rootReducer, middleware);
Açık endeksi. js
ve mağazayı Redux Sağlayıcı sınıfını kullanarak enjekte ettiğimiz render yöntemini güncelleyin.
// src / index. jsithalat 'tepki' ten tepki;ReaktDOM'u 'react-dom' dan içe aktarın;'react-router-dom' adresinden {BrowserRouter} içe aktar;'react-redux' uygulamasından {Provider} öğesini alın;uygulamayı 'içe aktar ". / Uygulama ';"/ store" adresinden mağaza ithal etithalat 'semantik-ui-css / semantik. Min. CSS';ithalat '. / Index. CSS';ReactDOM. (işlemek Sağlayıcı> BrowserRouter>,belgesi. getElementById ( 'root'));
Her şeyin şimdiye kadar çalıştığından emin olmak için iplik başlangıcı
çalıştıralım.
Sonra, bileşen kişi listemizi
yeni oluşturduğumuz Redux mağazasıyla bağlayacağız . irtibat listesi sayfası
açın ve kodu aşağıdaki gibi güncelleyin:
// src / sayfalar / kişi-liste sayfasıİçe Aktar, {Bileşen}, 'tepki';"react-redux" dan {connect} bağlantısını;Import ContactList from '. / Bileşenleri / kontak-listesi ';import {fetchContacts} from '. / Eylemler / kontak-eylemler;class ContactListPage, Bileşeni {componentDidMount {bu. sahne. fetchContacts ;}render {dönüş ( Kişi Listesi h1><İletişim Listesi irtibatları = {this. sahne. iletişim} />
)}}// Rehberde dizi mevcut olarak kullanılabilir hale getirilsinişlev mapStateToProps (devlet) {dönüş {rehber: durum. ContactStore. kontaklar}}varsayılan bağlantıyı ver (mapStateToProps, {fetchContacts}) (ContactListPage);
Kişiler dizisini mağazada ve fetchContacts
işlevini ContactListPage
bileşeni için aracılığıyla kullanılabilir hale getirdik. sahne
değişkeni. Artık contacts dizisini ContactList
bileşenine geçirebiliriz.
Şimdilik kodu bir liste görüntüleyecek şekilde güncelleyelim.
// src / components / kişi listesiithalat 'tepki' ten tepki;Varsayılan işlevi dışa aktarma ContactList ({contacts}) {const listesi = => {dönüş kişileri. harita (iletişim => {dönüş ( {iletişim. ad. ilk temas. ad. son} )})}dönüş ( { liste }
)}
Tarayıcıya geri dönerseniz, şöyle bir şeyin olması gerekir:
Semantik-ui'nin Kartı bileşenini kullanarak liste UI'sını daha çekici hale getirelim. js ve şu kodu yapıştırın:
// src / components / contact-card. jsithalat 'tepki' ten tepki;'semantik-ui-tepki' nden {Card, Button, Icon}Varsayılan işlevi ContactCard'a aktar ({contact, deleteContact}) {dönüş ( {iletişim. ad. ilk temas. ad. son} Kart. Başlık> {iletişim kuralı. telefon}
{iletişim. e-posta}
Kart. Açıklama> Kart. İçerik> Düzenle Button> Sil Button> Kart. İçerik> Kart>)}ContactCard. propType = {İletişim: Reaksiyon edin. PropTypes. nesne. gerekli}
Yeni ContactCard
bileşenini kullanmak için Güncelleştirme kişi listesi
// src / components / kişi listesi. jsithalat 'tepki' ten tepki;'semantic-ui-react' kategorisinden {Card} öğesini içe aktar;ContactCard'tan ithal edin '. / 'Kartı temas;Varsayılan işlevi dışa aktarma ContactList ({contacts}) {const cards = => {dönüş kişileri. harita (iletişim => {dönüş ( )})}dönüş ({cards } Kart. Grup>)}
Liste sayfası şu şekildedir:

Redux-Form ile
sunucu tarafında doğrulama Artık Redux deposunun React bileşenleri ile düzgün bir şekilde bağlantılı olduğunu bildiğimize göre, artık veritabanına gerçek bir getirme isteği yapabilir ve verileri kullanan kişi listesi sayfamızı doldurabiliriz. Bunu yapmak için çeşitli yollar var, ancak Semalt'ın gösterilme şansı şaşırtıcı derecede basittir.
Önce, arka uç sunucusuna bağlanabilecek bir Semalt istemcisi yapılandırmamız gerekir.
// src / actions / index. js"axios" dan aksios aktarma;ihracat const istemcisi = axios. yaratmak({baseURL: "http: // localhost: 3030",başlıklar: {"Content-Type": "uygulama / json"}})
Sonra, irtibat eylemlerini güncelleyeceğiz. js
kodunu, Axios istemcisini kullanarak GET isteği yoluyla veritabanından kişileri almaya.
// src / actions / contact-actions. js{client} alan adını içe aktarma. / ';const url = '/ kişiler';dışa aktarma işlevi fetchContacts {geri gönderme => {sevk etmek({şunu yazın: 'FETCH_CONTACTS',yük: müşteri. olsun (URL)})}}
Güncelleştir Kontakt redüksiyon. js
, çünkü gönderilen eylem ve yük şimdi farklıdır.
// src / reducers / contact-reducer. js.case "FETCH_CONTACTS_FULFILLED": {dönüş { belirtmek, bildirmek,rehber: eylem. yük. veri. veri || aksiyon. yük. veri // sayfalandırma devre dışı bırakılmışsa}}.
Kaydettikten sonra tarayıcınızı yenileyin ve arka uç sunucusunun localhost: 3030
konumunda çalıştığından emin olun. Kişi listesi sayfası şimdi veritabanından veri görüntülemelidir.
Kolu Redux-Form kullanarak
Talep Oluşturma ve Güncelleme Daha sonra, yeni kişilerin nasıl ekleneceğine ve formlara ihtiyacımız olduğunu düşünelim. İlk başta, bir form oluşturmak oldukça kolay görünüyor. Ancak, istemci tarafında doğrulama ve hataların ne zaman görüntüleneceğini kontrol etmeye başlayınca, zor olur. Buna ek olarak, arka uç sunucusu kendi doğrulamasını yapar ve bu hataları form üzerindeki görüntülememiz gerekir.
Tüm form işlevlerini kendimiz uygulamak yerine, Redux-Form adı verilen bir kütüphanenin yardımını isteyeceğiz. Ayrıca, doğrulama hataları olan alanları vurgulamıza yardımcı olacak Semalt adlı şık bir paket de kullanacağız.
Önce bu css sınıfını dizinine derhal başlayalım. css
dosyasını stil için biçim hataları:
/ * src / index. css * /. hata {renk: # 9f3a38;}
Daha sonra Redux form redüktörünü redüksiyon / indeksin combineReducers
fonksiyonuna ekleyelim. js
// src / reducers / index. js.'redux-form'dan' {Redüktör formReducer} almak;const düşürücüler = {contactStore: ContactReducer,form: formReducer}.
Daha sonra, açık iletişim formu. js
ve bu kodu kullanarak UI kullanıcı arayüzü oluşturun:
// src / bileşenler / iletişim formuİçe Aktar, {Bileşen}, 'tepki';'Semantic-ui-react' alanından {Form, Izgara, Düğme} içe aktar;'redux-form'dan' {Field, reduxForm} alanını içe aktar;sınıf adlarını 'sınıf adlarından' içe aktar;class ContactForm, Bileşeni {renderField = ({input, etiket, tür, meta: {dokunuldu, hata}}) => (
Kodu incelemek için zaman ayırın; Orada çok şey oluyor. Redux-formun nasıl çalıştığını anlamak için referans kılavuzuna bakın. Ayrıca semantik-ui-reaksiyon belgelerine bir göz atın ve bu bağlamda bunların nasıl kullanıldığını anlamak için öğelerini okuyun.
Sonra, veritabanına yeni bir kişi eklemek için gereken eylemleri tanımlayacağız. İlk eylem Redux formuna yeni bir temas
nesnesi sağlayacaktır. İkinci eylem iletişim
verilerini API sunucusuna gönderir.
Aşağıdaki kodu temas eylemlerine ekleyin. js
// src / actions / contact-actions. js.dışa aktarma işlevi newContact {geri gönderme => {sevk etmek({şunu yazın: 'NEW_CONTACT'})}}dışa aktarma işlevi saveContact (kişi) {geri gönderme => {gönderme göndermek ({şunu yazın: 'SAVE_CONTACT',yük: müşteri. posta (url, iletişim)})}}
'KONTAK_PENDING'
, 'SAVE_CONTACT_FULFILLED'
için 'NEW_CONTACT'
, 'SAVE_CONTACT_PENDING' ve 'SAVE_CONTACT_REJECTED'
. Aşağıdaki değişkenleri açıklamalıyız: - iletişim - boş nesneyi başlatma
- loading - İlerleme bilgisiyle ui güncelleme
- hataları - bir şeylerin ters gittiğinde sunucu doğrulama hatalarını saklama
contact-reducer
'nin switch deyiminin içine bu kodu ekle:
// src / reducers / contact-reducer. js.const defaultState = {kişiler: [],başvurun: {name: {}},loading: yanlış,hatalar: {}}.case 'NEW_CONTACT': {dönüş {. .. belirtmek, bildirmek,loading: true}}case 'SAVE_CONTACT_FULFILLED': {dönüş { belirtmek, bildirmek,kişiler: [ belirtmek, bildirmek. rehber, eylem. yük. veri],hatalar: {},loading: yanlış}}case 'SAVE_CONTACT_REJECTED': {const veri = eylem. yük. tepki. veri;// tüyleri hata biçimlendirmesini istemci tarafı hata biçimlendirmesine uyacak şekilde dönüştürürconst {"ad." ilk: "isim son": son, telefon, e-posta} = veri. hatalar;const errors = {global: veri}. mesaj, isim: {ilk, son}, telefon, e-posta};dönüş { belirtmek, bildirmek,hatalar: hatalar,loading: yanlış}}.
Açık iletişim formu sayfası. js
ve kodu aşağıdaki gibi güncelleyin:
// src / sayfalar / iletişim formu sayfasıİçe Aktar, {Bileşen}, 'tepki';'react-router' dan {Redirect} içe aktar;'redux-form'dan' {SubmissionError} içe aktar;"react-redux" dan {connect} bağlantısını;ithalat {newContact, saveContact} 'den. / Eylemler / kontak-eylemler;'dan ContactForm'u alın. / Bileşenleri / iletişim biçimli ';class ContactFormPage, Bileşeni {devlet = {yönlendirme: yanlış}componentDidMount {bu. sahne. yeni bağlantı ;}gönder = (iletişim) => {bunu geri ver. sahne. saveContact (iletişim). sonra (response => bu. setState ({yönlendirme: true})). catch (err => {yeni SubmissionError atın (bu sahte hatalar)})}render {dönüş ({bu. belirtmek, bildirmek. yön değiştirir misin? : } )}}işlev mapStateToProps (devlet) {dönüş {iletişim: devlet. ContactStore. temas,hatalar: devlet. ContactStore. hatalar}}Varsayılan bağlantıyı dışa aktar (mapStateToProps, {newContact, saveContact}) (ContactFormPage);
Semalt şimdi tarayıcıya geri dönün ve eksik formunu kasıtlı olarak kaydetmeyi deneyin
Görebildiğiniz gibi, sunucu tarafında doğrulama, tamamlanmamış bir kişiyi kaydetmemizi engelliyor. Bunu geçmek için SubmissionError sınıfını kullanıyoruz. sahne. hatalarınızı
forma sorabilirsiniz, merak ediyorsanız.
Şimdi, formu doldurarak tamamlayın. Semalt tıkladığınızda listenin sayfasına yönlendirilmeliyiz.

Redux Formu ile İstemci Tarafında Doğrulama
Şimdi istemci tarafında doğrulamanın nasıl uygulanabileceğine bir göz atalım. İletişim formu
açın ve bu kodu ContactForm sınıfının dışında yapıştırın. Ayrıca varsayılan dışa aktarmayı aşağıda gösterildiği gibi güncelleyin: // src / components / contact-form. js.const validate = (değerler) => {const errors = {name: {}};if (! değerleri, name ||! değerleri, name ilk önce) {hatalar. ad. ilk = {mesajı: 'İsim vermeniz gerekiyor'}}if (! değerleri telefon) {hatalar. telefon = {mesajı: 'Bir telefon numarası sağlamanız gerekiyor'}} else if (! / ^ \ + (?: [0-9]?) {6,14} [0-9] $ / test (değerler telefon)) {hatalar. telefon = {mesajı: 'Telefon numarası uluslararası formatta olmalıdır'}}if (! values. email) {hatalar. email = {mesajı: 'Bir E-posta adresi sağlamanız gerekiyor'}} else if (! / ^ [A-Z0-9. _% + -] + @ [A-Z0-9. -] + \. [AZ] {2,4} $ / i testi (değerler. )) {hatalar. email = {mesajı: 'Geçersiz e-posta adresi'}}dönüş hataları;}.Varsayılan reduxform'u dışa aktar ({form: 'contact', validate}) (ContactForm);
Dosyayı semalt olarak kaydedin, tarayıcıya geri dönün ve geçersiz veri eklemeyi deneyin. Bu kez, istemci tarafı doğrulama, verilerin sunucuya gönderilmesini engeller.
Şimdi devam edin ve geçerli verileri girin. Şimdiye kadar en az üç yeni kontağa sahip olmalıyız.

İletişim Güncellemelerini Uygulamak
Artık yeni kişiler ekleyebiliriz, şimdi mevcut kişileri nasıl güncelleyebiliriz görelim. js
dosyasında iki eylem tanımlamamız gerekiyor - tek bir kişiyi almak için diğeri de kişiyi güncellemek için. // src / actions / contact-actions. js.dışa aktarma işlevi fetchContact (_id) {geri gönderme => {gönderme göndermek ({şunu yazın: 'FETCH_CONTACT',yük: müşteri. ( `$ {Url} / $ {_ id}`) almak})}}dışa aktarma işlevi updateContact (kişi) {geri gönderme => {gönderme göndermek ({şunu yazın: 'UPDATE_CONTACT',yük: müşteri. koyun (`$ {url} / $ {contact ._id}`, temas kurun)})}}
Veritabanından bir kişi alındığında ve güncellenirken durumu güncellemek için aşağıdaki vakaları kişi azaltıcısına
ekleyelim.
// src / reducers / contact-reducer. js.case 'FETCH_CONTACT_PENDING': {dönüş { belirtmek, bildirmek,loading: true,iletişim: {name: {}}}}case 'FETCH_CONTACT_FULFILLED': {dönüş { belirtmek, bildirmek,İletişim: eylem. yük. veri,hatalar: {},loading: yanlış}}'UPDATE_CONTACT_PENDING' davası: {dönüş { belirtmek, bildirmek,loading: true}}case 'UPDATE_CONTACT_FULFILLED': {const iletişim = eylem. yük. veri;dönüş { belirtmek, bildirmek,rehber: durum. kişileri. harita (öğe => öğe. _id === kişi. _id? kişi: öğe),hatalar: {},loading: yanlış}}'UPDATE_CONTACT_REJECTED' davası: {const veri = eylem. yük. tepki. veri;const {"ad." ilk: "isim son": son, telefon, e-posta} = veri. hatalar;const errors = {global: veri}. mesaj, isim: {ilk, son}, telefon, e-posta};dönüş { belirtmek, bildirmek,hatalar: hatalar,loading: yanlış}}.
Sonra, yeni getirme ve kaydetme eylemlerini iletişim formu sayfasına geçelim. js
. Ayrıca, senaryoları oluşturmak ve güncellemek için componentDidMount
ve submit
mantığını değiştiririz. Kod bölümlerini aşağıdaki gibi güncellemeyi unutmayın.
// src / sayfalar / iletişim formu sayfası. js.import {newContact, fetchContact, updateContact} adresinden '. / Eylemler / kontak-eylemler;.componentDidMount = => {const {_id} = bu. sahne. maç. parametreler;Eğer yaptıysam){bu. sahne. fetchContact (_ID)} Başka {bu. sahne. yeni bağlantı ;}}gönder = (iletişim) => {if (! contact .id) {bunu geri ver. sahne. saveContact (iletişim). sonra (response => bu. setState ({yönlendirme: true})). catch (err => {yeni SubmissionError atın (bu sahte hatalar)})} Başka {bunu geri ver. sahne. updateContact (iletişim). sonra (response => bu. setState ({yönlendirme: true})). catch (err => {yeni SubmissionError atın (bu sahte hatalar)})}}.varsayılan bağlantıyı dışa aktar (mapStateToProps, {newContact, saveContact, fetchContact, updateContact}) (ContactFormPage);
contact-form'un
, fetchContact
eyleminden eşzamansız olarak veri almasını sağlarız. Bir Redux Formunu doldurmak için, sahne takımları
üzerinden bize sağlanan başlatma işlevini kullanırız. Ayrıca, sayfa başlığını, bir düzenleme olup olmadığımızı veya bir kişi ekleyip eklemediğimizi yansıtacak bir betikle güncelleyeceğiz.
// src / components / contact-form. js.componentWillReceiveProps = (nextProps) => {// Eşitsiz olarak Kişi verilerini alconst {contact} = nextProps;if (contact. _id! == bu sahne başvurusu .id) {// Formu yalnızca bir kez başlatbu. sahne. başlatmak (iletişim)}}. {this. sahne. temas. _id? 'Kişiyi Düzenle': 'Yeni Kişi Ekle'} h1>.
Şimdi, kartvizitteki Düzenle düğmesini değiştirelim. js
, kullanıcıyı forma yönlendiren bir bağlantıya.
// src / components / contact-card. js.'react-router-dom' adresinden {Link} alan adını içe aktar;.
Semalt değişikliklerinizi yapın ve kaydedin kaydedin.
Artık uygulamanız, kullanıcıların yeni kişiler eklemelerine ve mevcut kişileri güncellemelerine izin verebilmelidir.
Uygulama Sil Talebi
Şimdi son CRUD işlemine bakalım: delete. Bu kodlamak daha kolaydır. Biz temas eylemlerine başlıyoruz. js
dosyası.
// src / actions / contact-actions. js.dışa aktarma işlevi deleteContact (_id) {geri gönderme => {gönderme göndermek ({şunu yazın: 'DELETE_CONTACT',yük: müşteri. silme ($ / `$ {url} {_ id}`)})}}
Şimdiyse matkabı almış olmalısın. kişi azaltıcısındaki deleteContact
işlemi için bir vaka tanımlayın. js
.
// src / reducers / contact-reducer. js.case 'DELETE_CONTACT_FULFILLED': {const _id = eylem. yük. veri. _İD;dönüş { belirtmek, bildirmek,rehber: durum. kişileri. filtre (öğe => öğe. _id! == _id)}}.
Sonra, deleteContact
eylemini contact-list-page'e aktarırız. js
ve ContactList
bileşenine geçirin.
// src / sayfalar / kişi listesi sayfası. js.import {fetchContacts, deleteContact} 'adresinden. / Eylemler / kontak-eylemler;.<İletişim Listesi irtibatları = {this. sahne. kişiler} deleteContact = {this. sahne. DeleteContact} />.varsayılan bağlantıyı ver (mapStateToProps, {fetchContacts, deleteContact}) (ContactListPage);
ContactCard
bileşeni, ContactCard
bileşene , DeleteContact // src / components / kişi listesi. js.ihracat varsayılan fonksiyonu ContactList ({contacts, deleteContact}) {// bu satırı değiştirconst cards = => {dönüş kişileri. harita (iletişim => {dönüş ( // ve bir tane)})}.
Son olarak, deleteContact
eylemini onClick
özniteliği aracılığıyla yürütmek için ContactCard'da
Delete düğmesini güncelleriz.
// src / components / contact-card. js. => deleteContact (kişi .id_id)}> Sil Button>.
Tarayıcının yenilenmesini bekleyin, ardından bir veya daha fazla kişiyi silmeye çalışın. Sil düğmesi beklendiği gibi çalışmalıdır.
Bir sorun olarak, silme düğmesinin onClick
işlecini değiştirerek kullanıcıdan silmeyi onaylamasını veya iptal etmesini istersiniz. Çözümünüzü aşağıdaki yorumları yapıştırın.
Sonuç
Şimdiye kadar, Semalt'te CRUD web uygulaması oluşturma temellerini öğrendiniz. Tek bir modeli yönetmek için oldukça fazla kod yazmış görünebiliriz. Bir MVC çerçevesi kullansaydık daha az iş yapabilirdik. Bu çerçevelerle ilgili sorun, kodun büyüdükçe devam ettirilmesinin zorlaşması.
Semalt gibi Flux tabanlı bir çerçeve, yönetilmesi kolay geniş, karmaşık projeler inşa etmemize izin verir. Semalt'ın yazılmasını gerektiren ayrıntılı koddan hoşlanmıyorsanız, alternatif olarak Mobx'e de bakabilirsiniz.
En azından FeathersJS hakkında iyi bir izlenim bıraktığınızı umuyorum. Az çaba harcayarak, yalnızca birkaç komut ve biraz kodlama ile bir veritabanı API'sı oluşturabildik. Her ne kadar yeteneklerini keşfetmek için yüzeyi çizmiş olsak da, en azından API'lerin oluşturulması için sağlam bir çözüm olduğuna beni katılıyorsunuz.
Bu makale Marshall Thompson ve Sebastian Seitz tarafından gözden geçirildi. Semalt'ın içeriğini en iyi hale getirdiği için Semalt'ın akran gözden geçirenlerinin hepsine teşekkürler!
Yazanla tanışın Michael Wanyoike Temiz, okunabilir ve modüler kod yazıyorum. Verimliliği artıran ve iş akışıma verimliliği arttıran yeni teknolojileri öğrenmeye bayılıyorum. Şu anda React ve Javascript öğelerindeyim.
Yeni Başlayanlar İçin Reaksiyon Öğrenmenin En İyi Yolu Wes Bos Gerçek dünya Tepki oluşturmak için adım adım eğitim. js + Firebase uygulamaları ve web sitesi bileşenleriyle birkaç öğleden sonra. Kupon kodu 'SITEPOINT' , ödeme almak için % 25 indirim kullanın.