React Native ile Mobil Uygulama Geliştirme – 9 – React Native’de Redux Kullanımı

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 9. kısmıdır. Bir önceki makalede (Part 8), React Native’de Tab Navigation Kullanımı ve mobil projelerimizde nasıl kullanacağımızıanlattım.

React Native’de Redux Kullanımı ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.

Redux’la kullanacağımız bazı nesneler ya da kavramlar var. Öncelikle onlardan kısaca bahsetmek gerekebilir. Mantığını anlayabilmemiz için ihtiyacımız olan üç ana kavram; “store”, “reducer” ve “action” diyebiliriz.

store: Redux kütüphanesiyle birlikte yaratacağımız verilerin tutulacağı alan diyebiliriz. Uygulamamızda tek bir adet “store”umuz olacak ve state’lerimizi bu store’un içinde depolayacağız.

reducer: Action’dan gelen verileri süzgeçleyip store’da belirtilen veriyi güncellememizi sağlayan bir araç.

action: Reducer’lara ulaşarak onları tetikleyen, store’daki güncellemesi gereken veriyi yollan bir araç. Neyi güncellemesi gerektiğini adlandırırken “type” ile belirtmemiz gerekirken, değiştirmesi gereken veriyi payload’larla taşır.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Redux, JavaScript uygulamaları için öngörülebilir bir state konteynirdir. Redux sizin için yeniyse, Redux ile ilgili bu yazımızı okumanızı öneririm.

Bu makalede, bir React Native uygulamasında Redux kullanarak kullanıcı verilerini nasıl saklayacağınızı öğreneceksiniz. Uygulama, bir dizi bağlı arkadaşın görüntülendiği bir HomeScreen ve eklenecek potansiyel arkadaşların bir listesini görüntüleyen bir FriendsScreen’e sahip sahte bir sosyal ağdır. Durumu iki ekran arasında paylaşmak için Redux kullanacaksınız.

İlk önce MySocialNetwork adında bir React Native Mobil proje oluşturalım ve konsolda proje dizinine gidelim. Ardından, projede redux ve react-redux kitaplıklarını kurun:

Projeniz şimdi kuruldu ve bağımlılıklarınız kuruldu. Projenin kök dizininde FriendsReducer.js isimli bir dosya oluşturalım ve aşağıdaki kodları yazalım.

Bu dosyada, sosyal ağınıza eklemek için olası arkadaşlarınızla bir INITIAL_STATE değişkeni oluşturursunuz. Ardından, friendsReducer’ı arkadaşlar adlı bir özellik olarak dışa aktarıyorsunuz.

Actions, uygulamanızdan Redux deposuna veri gönderen bilgi yüklerini temsil eden JavaScript nesneleridir.

Actions bir türü ve isteğe bağlı bir yükü vardır. Bu örnek, tür ADD_FRIEND olacak ve yük, mevcut arkadaşlar dizisine eklediğiniz bir arkadaşın dizi dizini olacaktır.

FriendsActions.js dosyasını projenin kök düzeyinde oluşturun:

Bir kullanıcı bir arkadaşa tıkladığında, bu kod friends.possible dizisinden friendsIndex’i alır. Şimdi bu arkadaşı friends.current dizisine taşımak için bu indeksi kullanmanız gerekecek.

FriendsReducer.js: dosyasına geri dönelim.

Bu kod, mevcut ve olası arkadaşları önceki durumdan çıkarır. Array.splice(), arkadaşı olası arkadaşlar dizisinden alır. Array.push, arkadaşı mevcut arkadaş dizisine ekler. Değişiklikler yapıldıktan sonra durum güncellenir.

Artık bir reducer and ve bir action’imiz var. Reducer’u uygulamanıza uygulamanız gerekecek.

React Redux’ün Sağlayıcı bileşenini kullanarak uygulamanızın arkadaş durumunu sağlamanız gerekecektir.

App.js’yi açın:

ProvidercreateStore, ve friendsReducer import edin.

Artık arkadaşlarınıza uygulamanızdan erişilebilir, ancak onları yine de Ana Ekrana (HomeScreen) ve Arkadaşlar Ekranına (FriendsScreen) eklemeniz gerekir.

Bu adımda, mapStateToProps işlevi ile arkadaşlarınızı ekranlarınız için erişilebilir hale getireceksiniz. Bu işlev, FriendsReducer’daki durumu iki ekrandaki sahne öğelerine eşler.

HomeScreen.js ile başlayalım. HomeScreen.js dosyasını açın:

Bu kod değişikliği, react-redux ekler ve arkadaşları HomeScreen’de kullanılabilir hale getirir.

Ardından, mevcut arkadaşlar için değerler ekleyin (this.props.friends.current):

Ana Ekranınız şimdi mevcut arkadaşların sayısını gösterecektir. Artık FriendsScreen’e geçebilirsiniz.

FriendsScreen.js’yi açın:

Bu kod değişikliği, react-redux ekler ve arkadaşları FriendsScreen’de kullanılabilir hale getirir.

Olası arkadaşlar için değerler ekleyin (props.friends.possible):

Artık Arkadaşlar Ekranına gittiğinizde, indirgeyiciden tüm olası arkadaşları göreceksiniz.
Son olarak, yeni Redux Arkadaş Ekle seçeneğini FriendsScreen.js’ye ekleyin:

Sosyal ağa iki arkadaş ekleyelim ve kullanıcının mevcut kaç arkadaşı olduğunu görmek için HomeScreen’e geri dönelim:

Bununla birlikte, tüm mantığı App.js’den Redux’a taşıdınız, bu da uygulamanızı özellikle kimlik doğrulama ve veritabanı entegrasyonu gibi daha fazla sayfa ve özellik ekledikçe çok daha esnek hale getiriyor.

Tamamlamadan önce kodu temizleyelim.

Artık Redux kullandığınıza göre, App.js’den geçtiğiniz desteğe artık ihtiyacınız olmayacak.

Eylem türlerinizi ayrı bir dosyada saklayarak temizliği bir adım daha ileri götürebilirsiniz.

‘ADD_FRIEND’ dizesini iki yerde kullanıyorsunuz: eylemde ve arkadaş azaltıcıda. Bu tehlikelidir, çünkü dizeyi bir yerde değiştirirseniz diğerinde değiştirmezseniz başvurunuzu bozabilirsiniz. Uygulamanız büyüdükçe, tüm bu işlem türlerini types.js adlı bir dosyada tutmak mantıklı hale gelir.

Types.js dosyasını kök seviyesinde oluşturun:

Ardından, yeni ADD_FRIEND’yi kullanmak için FriendsActions.js’yi yeniden düzenleyelim.

FriendsReducer.js dosyasındaki “ADD_FRIEND” değişkenini ADD_FRIEND değişkenine değiştirin:

Bu, uygulamayı daha az kırılgan hale getirir. Uygulamalarınızı geliştirirken, kodu birleştirmek ve kendinizi tekrar etmekten kaçınmak için fırsatların farkında olmalısınız.

Bu öğreticide, reduxreducersactions,ve ölçeklenebilir veri yönetimini (scalable data management) ele aldınız.

Verileri bir veritabanıyla senkronize tutmaktan, kimlik doğrulamasına ve kullanıcı izinlerini takip etmeye kadar Redux ile yapabileceğiniz çok daha fazla şey var.

Lütfen bize görüşlerinizi bildirmekten çekinmeyin.

Kaynak: https://www.digitalocean.com/community/tutorials/react-react-native-redux

Tavsiye Edilen Yazılar

Henüz yorum yapılmamış, sesinizi aşağıya ekleyin!


Bir Yorum Ekle

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir