React Native Uygulamanıza Redux Ekleyin

Global State’e neden ihtiyacımız var ?

Bir veriyi bir komponentten diğerine geçirmek için birden fazla seçeneğimiz var.İki komponent arasında ilişki var ise veri aktarımını prop ile kolaylıkla yapabiliriz.Fakat karmaşıklık artıkça komponent ağacı ve propsları takip etmek zorlaşır.Global State’e ihtiyaç duyduğumuz nokta tam da burası.Redux global store’u en yüksek seviyedeki bir komponent olarak düşünebilirsiniz.Buradan herhangi bir veriyi herhangi bir seviyedeki actions ve reducerlar yoluyla aktarabilir ve alabilirsiniz.Bu makalede, React native uygulamanıza Redux’ı nasıl ekleyebileceğinizi ve kullanacağınızı anlatacağız.

React-Redux nasıl kurulur ?

Proje dosyanızın dizininde terminali çalıştırıp aşağıdaki komutları yazın.

npm install redux react-redux redux-persist @react-native-community/async-storage --save

Reducerlar ve Actionlar nedir ?

Reducer bir uygulamanın state’indeki gerçekleşecek değişiklikleri belirleyen fonksiyondur.Actionlar ise bu değişikliği belirlemek için kullanılır.Şöyle bir örnek verebiliriz.Sizin kullanıcılarınız var ve bu bilgileri state’de tutmak istiyorsunuz.Bu kullanıcılar ile ilgili yapacağınız işlemler, kullanıcı güncelleme , kullanıcı silme , kullanıcı ekleme gibi şeyler belirlediniz bunlar Reducerdır.Kullanıcı güncelleme , silme , ekleme gibi işlemlerin nasıl yapılacağını tanımladığınız kısım iste Actionlardır.

Redux’ta derinlere indikçe tüm yapacağınız şeyin Reducerlar ve Actionlar olduğunu göreceksiniz.Bu kavramları tam anlamıyla kavrayabilirseniz kısa sürede Redux’da ustalaşacaksınız.Hadi başlayalım.

İlk Reducer’ımızı Yazalım

Projenin ana dizininde Redux adında bir klasör oluşturalım.İçinde de Reducers ve Actions isminde iki klasör daha oluşturalım.Reducers klasöründe userReducer adında bir dosya oluşturalım.Bu reducer’ı bir string(name) ve bir boolean(loggedIn) aktarmak için kullanacağız.

İlk başta initial state’imizin default değerlerini tanımlıyoruz daha sonrasında reducer’ımızı tanımlıyoruz.

Reducer’ımızın iki parametresi bulunmakta birincisi state’imiz ikincisi ise bu state’deki değişiklikleri tetikleyecek olan Action.State’imizi parametre olarak aldığımız Action’ın türüne göre değiştiririz.

İlk Action’ımızı Yazalım

Actions klasörümüzün içinde userActions adında bir dosya oluşturalım.İki tane action’ımız var birincisi username’i reducer’a aktarır diğeri ise user’ı resetler.

Root Reducer

Eğer uygulamamızda birden fazla reducer varsa hepsini birleştirecek bir root reducer yaratmamız gerekir.Reducers klasörün içinde rootReducer isminde bir tane daha dosya oluşturalım.

Dikkat! — Export ettiğiniz kısımda nesnenin sol tarafında tanımladığınız ismi kullanacağınız komponentte çağıracağınız isimde verdiğinizden emin olun.Yani yukarıdaki örnekte “user” yazan kısıma ne yazdıysanız çağırırken o isim ile çağıracaksınız.

Redux-Persist Nedir ?

Eğer uygulamanızı kapattığınızda da bazı verilerin Reduxda tutulmasını istiyorsanız Redux-Persist’e ihtiyaç duyacaksınız.Redux-Persist sayesinde kayıtlı kalmasını istediğiniz ve silinmesini istediğiniz verileri belirleyebilirsiniz.

Aşağıdaki örnekte görüldüğü gibi kayıt etmek istediklerinizi Whitelist’e özellikle silinmesini istediklerinizi Blacklist’e yazabilirsiniz.

Redux klasöründe store isminde bir dosya açalım.

Şimdi uygulamamızı oluşturduğumuz store ile sarma vakti.

App.js dosyasını açın.Tüm komponentlerden Redux verilerine erişmek için uygulamamızı Provider ile sarmalı ve Store’u prop olarak vermeliyiz.

Redux-Persist için bir alt seviyede uygulamızı PersistGate ile sarmalıyız ve Persistor’u prop olarak verip loading prop’unu null olarak ayarlamalıyız.

Artık Reducer ve Action’ları uygulamamızda kullanmaya hazırız.

MapStateToProps ve MapDispatchToProps nedir ?

Redux Store’a Datayı Nasıl Göndeririz ?

Aşağıdaki örnekte kullanıcının adını girmesi ve adı ile devam edebilmesi için bir text input ve bir button’umuz var.landingPage isminde de bir komponentimiz var.Bu dosyada actionları kullanmadan önce import etmeliyiz.

Action’ı tetiklemek için mapDispatchToProps fonksiyonuna, Redux Store’daki datayı kullanmak için de mapStateToProps fonksiyonuna ihtiyacımız var.

Dispatch Action’ları tetikleyen bir fonksiyondur.Reducer’a bir parametre veririz ve reducer bunu action tetiklendiğinde kullanır.

Action’ı kullanmak oldukça kolaydır.Sadece props’tan alıp fonksiyon olarak kullanmamız gerekiyor.Resimde de göreceğiniz gibi state’deki username’i parametre olarak vererek action’ı çağırıyoruz.Bu action’ı tetikleyecek ve reducer’a username verisiyle gidecek.

Redux Store’dan Gelen Datayı Nasıl Alırız ?

Başka bir komponentte username’i gösterdiğimiz ikinci bir sayfamız var.

Redux Store’dan data almak için mapStateToProps fonksiyonuna ihtiyacımız var.mapStateToProps yardımıyla Store’umuzdaki state’ten user verisini alıp kullanacağız.Çıkış için de resetUserAction isimli action’ımızı tanımlayacağız.

Redux Store’daki veriyi kullanmak da actiondaki gibi oldukça kolay.Sadece props’tan tanımla ve istediğin yerde kullan.

Bu yazımızda Redux’ı React-Native’de nasıl kullanacağınızı göstermeye çalıştık.Redux öğrenmek biraz zaman alabilir ama yeteri kadar pratik yaparsanız kolaylıkla redux’ı kullanabilirsiniz.Daha detaylı bilgi için Redux dökümantasyonuna buradan ulaşabilirsiniz.

Bu projenin github linki için tıklayabilirsiniz.

Okuduğunuz için teşekkürler.React Native ve React hakkında daha fazla bilgi edinmek için bizi takip edebilirsiniz.

Herhangi bir hata alırsanız veya bu makale hakkında bir soru sormak isterseniz çekinmeden buradan veya Linkedin üzerinden bizle iletişime geçebilirsiniz.

MTA Team:

Ali Gümüş Tosun — Semih Sevincli — Burak Arıcı — Aslancan Yılmaz

LinkedIn Profilleri:

Ali Gümüş Tosun — Semih Sevinçli — Aslancan Yılmaz — Burak Arıcı