React Native Uygulamalarında Mobx'i State Manager Olarak Kullanmak

Durum yönetimi, JavaScript uygulamaları, özellikle React ve React Native uygulamaları geliştirmenin ayrılmaz bir parçasıdır. Bu derste, durum yönetimi için MobX kitaplığının nasıl kullanılacağını öğreneceğiz; temel kavramları, bazı kullanım durumlarını anlayın ve basit bir örnek oluşturun.

Not: Temel Javascript ve React Native bilgisi, bu eğitimde çalışırken size büyük fayda sağlayacaktır.

MobX'i React Uygulamalarında Kullanmak

Durum, bileşen(ler)inizin üzerinde çalıştığı verilerdir — bir bileşenin gerektirdiği verileri tutar ve bir bileşenin ne oluşturduğunu belirler. Durum yönetimi, durumun nasıl güncellendiğini ve bir bileşenden diğerine nasıl geçtiğini yönetme sürecidir. Bir uygulamadaki verileri izlemek ve bunlarla çalışmak zor olabilir ve bu durum yönetim kitaplıklarına ihtiyaç duyar. Uygulamanız için tüm verileri işlemek, özellikle uygulamanızın boyutu ve karmaşıklığı arttıkça biraz göz korkutucu olabilir, kendi durum yönetimi aracınızı oluşturmak sadece zaman alıcı değil, aynı zamanda zordur, Bu nedenle bir durum yönetimi kitaplığı kullanmak isteyebilirsiniz.

Bununla birlikte, bir bileşenin oluşturduğu tek verinin durum olmadığını bilmek önemlidir, bileşenler ayrıca kendisine aktarılan sahne öğelerini de oluşturabilir.

Devlet Yönetimi için Seçenekler

React Native uygulamaları için durum yönetimi kitaplıkları şunları içerir; React Context API, Redux, MobX ve Unstated Next.

Bu eyalet yöneticilerinin her birinin kendi avantajları ve dezavantajları olmasına rağmen, basitliği, minimum standart kod kodu nedeniyle kişisel olarak MobX'i tavsiye ederim - kodunuzu değiştirmenizi gerektirmez, bunun nedeni, özünde MobX'in JavaScript'tir ve JavaScript'e benzemesidir; bunu desteklemek için bir mimari değişikliğine ihtiyacınız yok (Redux'un aksine ve daha az ölçüde Context).

Aslında bu o kadar görünmez bir soyutlamadır ki, çoğu durumda tüm MobX kodunu - @observable , @computed , @action ve gözlemci dekoratörlerini çıkarırsanız, kodunuz tamamen aynı şekilde çalışacaktır (ancak bazı performans sorunları olacaktır). ) ve küresel bir devletle sınırlı değildir. Bunlar, React Native uygulamalarınız için tercih edilen bir eyalet yöneticisi olarak MobX ile ilerlemek için bazı nedenlerdir.

MobX'i durum yöneticisi olarak kullanmayla ilgili bazı sorunları not etmek de önemli olsa da, bunların bazıları nasıl uygulanacağına ilişkin kurallardan kaçınmayı içerir ve özellikle @actions kullanmadan doğrudan bir bileşende durumu değiştirdiğinizde MobX'in hatalarını ayıklamak zor olabilir. parametre.

MobX Nedir?

Resmi belgelere göre MobX, işlevsel reaktif programlamayı şeffaf bir şekilde uygulayarak durum yönetimini basit ve ölçeklenebilir hale getiren, savaşta test edilmiş bir kitaplıktır. MobX, uygulamanıza bir elektronik tablo gibi davranır. Mantık, uygulama durumundan türetilen her şeyin otomatik olarak yapılması gerektiğidir .

MobX'in Temel İlkeleri ve Konsepti

MobX, aşağıdaki kavramlarla kendisini diğer devlet yöneticilerinden ayırmaktadır.

1. Devlet

Durum, uygulamanızın sahip olduğu verilerdir - kabaca belleğinin tüm içeriğidir. Bu, bileşenleriniz için de geçerlidir.

2. Türevler

MobX'te, etkileşim olmadan durumdan türetilebilen her şey bir türevdir. Türetme örnekleri şunları içerir:

• Kullanıcı arayüzü,
• Sunucudaki değişiklikler gibi arka uç eklentileri.

MobX'in iki ana türetme türü vardır:

• hesaplanan değerler
  Hesaplanan değerler çoğunlukla saf fonksiyonlar kullanılarak mevcut bir durumdan türetilebilen değerlerdir.
• reaksiyonlar
  Türevlerdeki reaksiyonlar, uygulama durumunuzdaki değişikliklerin bir sonucu olarak ortaya çıkan yan etkilerdir. Hesaplanmış bir değere benzerler, ancak yeni bir değer üretmek yerine, bir tepki konsola yazdırma, ağ istekleri yapma, DOM'ye yama yapmak için React bileşen ağacını aşamalı olarak güncelleme vb. şeyler için bir yan etki üretir.

MobX kullanırken altın kural, mevcut duruma dayalı bir değer oluştururken hesaplanmış bir değer kullanmaktır.

3. Eylemler

Türevlerden farklı olarak, eylemler, bir uygulama durumunda değişikliklere neden olan kodlardır - durumu değiştiren kod. Devleti değiştiren her şeydir. MobX ile kodunuzda açık hale getirebilirsiniz, Eylemler çoğunlukla girdiler, arka uç veri göndermeleri ve hatta planlanmış olaylar gibi kullanıcı olaylarıdır.

Eylemleri daha iyi anlamak için MobX belgelerinden bir örneğe bakalım.

 class Ticker { @observable tick = 0 @action increment() { this.tick++ // 'this' will always be correct } } const ticker = new Ticker() setInterval(ticker.increment, 1000)

Burada, başlangıç ​​değeri 0 olan bir @observable tick belirledik. Ardından, her saniyede bir onay yapıldığında başlangıç ​​değerini güncelleyen bir eylem olan bir fonksiyon artışı yarattık.

MobX'te Gözlenebilirler

MobX'teki gözlenebilirler veya gözlemlenebilir değerler çoğunlukla JavaScript ilkelleri, düz nesneler, sınıflar, diziler ve haritalardır. Çoğunlukla önce bir gözlemlenebilir ilan ederek ve buna bir değer ekleyerek ve ardından aşağıda gösterildiği gibi bir @gözlenebilir ekleyerek çağırarak kullanılırlar:

 observable(value) @observable classProperty = value

MobX'te Mağaza Mimarisi Yaklaşımı

MobX ana mimarisi, bazıları aşağıda açıklanan hizmetler, mağaza, görünüm modelleri ve kapsayıcılar gibi parçaları ve fikirleri içerir.

• Hizmet
  Bu genellikle bir kapsayıcıdan çağrılan bir işlevdir; API'lerden veri almak ve mağazaya eklenmek için kullanılabilirler.
• Mağaza
  Adından da anlaşılacağı gibi, burası bir uygulamanın kullandığı devletin merkezi yeridir. Genellikle MobX'te bunlar, gözlemlenebilirleri, değişkenleri, eylemleri ve hesaplanan özellikleri içerir.
• konteyner
  Bu, service çağırır ve View Model'den View Component'e React props olarak veri koyar ( @observer dekoratörü ile işaretlenmelidir).

React ve Native Uygulamalarda MobX

Öğrenme amacıyla, bu eğitimde, bir kullanıcının liste öğeleri eklemesine, görüntülemesine ve silmesine izin verecek basit bir liste uygulaması oluşturacağız. Listeleri eklemek, güncellemek ve uygulama durumundan silmek için bu uygulamada durum yöneticisi olarak MobX'i kullanacağız. Ancak, JavaScript ve React'in temel kavramlarını zaten anladığınızı belirtmek önemlidir.

Lafı fazla uzatmadan başlayalım!

Ortamınızı Ayarlama

Artık MobX'in ne olduğunu ve nasıl çalıştığını bildiğimize göre, projenizi kurarken size yol göstermeme izin verin.

Öncelikle aşağıdakilerle bir proje oluşturalım, bir projeyi başlatmak için terminalinize aşağıdaki kodu yazalım:

 npx create-react-app listapp

Yukarıdaki kod, create-react-app paketini kullanarak çıplak bir React uygulaması oluşturacaktır. Proje dizinine taşıyın:

 cd listapp

Bu uygulama için üç bileşene ihtiyacımız olacak:

• TitleInput
  Bu, projemizin başlığını ve liste eklemek için bir giriş formunu içerecektir.
• List
  Bu, kullanıcının liste eklemesine izin verecek bir giriş formu olacaktır. Liste öğelerimizi eklemek için bir ekle düğmesine sahip olacaktır.
• ListsDisplay
  Bu bileşen, tüm kullanıcı listesi öğelerini ve ayrıca bir kullanıcı bir liste öğesi eklediğinde otomatik olarak oluşturulan bir silme düğmesini görüntüler.

Uygulama durumunu içermek için bir Store.js ve Redux'a benzer şekilde değiştirme yöntemlerini kullanacağız. Ne için kullanılacağını özetleyelim.

• mobx
  Bu proje için kullanacağımız eyalet yöneticisi budur.
• mobx-react
  Bu, MobX için resmi React bağlamalarıdır.
• bootstrap
  Projemize stil vermek için bootstrap 4.5 sürümünü kullanacağız.
• uuid
  Bu, listeleri silmek için otomatik olarak anahtarlar oluşturmak için kullanılır.

Bunu yaptıktan sonra devam edelim ve bu paketleri kuralım. Onları iplikte yapılan bir npm alternatifi ile kuracağım:

 yarn add mobx mobx-react [email protected] uuid

Paketler yüklendikten sonra, terminalimizde aşağıdaki kodu çalıştırarak uygulamamızı geliştirme modunda başlatacağız:

 yarn start

App Store'umuzu Kurma

Projemiz için bir mağaza oluşturalım. İlk olarak, ListStore adlı projemizin kök dizininde bir dosya oluşturun, bu, uygulama durumumuzun merkezi konumu olacaktır.

Bu uygulama için, diğer uygulama bileşenlerinde kullandığımızda kendimizi tekrar etmemek için bir ListStore oluşturmamız gerekecek.

 /*** src/Store.js ***/ import { observable, action, computed } from "mobx"; import { v4 } from "uuid"; export class List { @observable value @observable done constructor (value) { this.id = v4() this.value = value } } export class ListStore { @observable lists = [] @observable filter = "" @action addList = (value) => { this.lists.push(new List(value)) } @action deleteList = (list) => { this.lists = this.lists.filter(t => t !== list) } @computed get filteredLists () { const matchCase = new RegExp(this.filter, "i") return this.lists.filter(list=> !this.filter || matchCase.test(list.value)) } }

Yukarıdaki kodda mobx üç fonksiyon içe aktardık.

• observable
  Bu, durumda bir değişiklik olması durumunda güncellenebilen bir değişkeni tutar.
• action
  Uygulama durumunu değiştirmek için kullanılır.
• computed
  Mevcut durumdan veya diğer hesaplanan değerlerden türetilebilen değerler, bir durum değiştirildikten sonra değişir.

List sınıfı, done iki nesne değerine ve uygulamanın ilk durumunu ve değişiklik durumunda değişikliği tutacak value sahiptir.

Yeni listemizin otomatik olarak bir anahtar oluşturmasını istiyoruz, böylece bir liste oluşturulduktan sonra otomatik olarak bir silme düğmesi alabiliriz, Burada uuid, uygulamamızda otomatik olarak anahtar oluşturmak için kullanılır.

Ardından, @observable @observable lists dizisinde oluşturduğumuz dizideki listeyi itmek için .push() yöntemini kullanarak tıklandığında listeler ekleyecek bir addList işlevi ekledik.

deleteList işlevi, List , kullanıcının kaldırmak istediği öğe olması gereken bir özellik olarak kabul eder. Ardından this.Lists değerini seçili öğeyi kaldırdıktan sonra yeni bir diziye ayarlıyoruz.

Hem addLists hem de deleteList , değişiklik yapıldığında uygulamamızın durumunu değiştirdikleri için eylemlerdir.

MobX Mağazasını Başlatma

Listemizde bir sonraki adım, App.js'deki mağazamızı içe aktarmak ve projemizde kullanmaktır.

 import React from 'react'; import Navbar from "./components/navbar"; import ListDisplay from "./components/ListDisplay"; import {ListStore} from './ListStore'; function App() { const store = new ListStore() return ( <div> <Navbar store={store}/> <ListDisplay store={store}/> </div> ); } export default App;

Burada TitleInput ve ListDisplay bileşenlerini içe aktardık. Ardından, TitleInput ve ListDisplay bileşenlerine sahne olarak iletebilmek için mağazayı App.js başlattık.

Normalde bu bir hata verir çünkü diğer bileşenler üzerinde çalışmadık, o yüzden yapalım. ListDisplay bileşenini oluşturalım.

ListDisplay

Bu bileşen, eklenen tüm listelerimizi görüntüler ve ayrıca yeni bir liste eklendiğinde otomatik olarak bir silme düğmesi oluşturur.

 import React from 'react' import List from "./List"; import { observer } from 'mobx-react'; function ListDisplay(props) { const { deleteList, filteredLists } = props.store return ( <div> <div className="container"> {filteredLists.map(list => ( <List key={list.id} list={list} deleteList={deleteList} /> ))} </div> </div> ) } export default observer(ListDisplay)

Bu bileşen için ListDisplay fonksiyonunu oluşturup onu gözlemci yaptık, ayrıca mağazadan list ve deletelist fonksiyonlarını da yok ettik, bunu yaparak daha sonra object props olarak geçmesini kolaylaştırdık.

Daha sonra, listeleri döndürmek için filteredLists aracılığıyla eşleştiririz ve daha sonra döndürülen öğeyi destek olarak List bileşenine geçirerek bireysel listeyi oluştururken kullanırız.

Bittiğinde, bileşenimiz eklenen listelerle şöyle görünmelidir:

Sonraki, bir Liste ve TitleInput bileşenleri eklemektir.

Liste Bileşeni

Diğer bileşenlerimiz gibi, List bileşenimiz de mağazanın değişiklikleri izlemesine yardımcı olmak için listeyi bir gözlemci olarak dışa aktarır.

 import React from 'react' import { observer } from 'mobx-react' function List(props) { return ( <div className="card"> <div className="card-body"> <div className="d-flex justify-content-between align-items-center"> <p className={`title ${props.list.done ? "text-secondary" : ""}`}> {props.list.value} </p> <div> <button onClick={props.deleteList.bind(this, props.list)} className="btn btn-danger font-weight-bold py-2 px-5 ml-2"> Delete </button> </div> </div> </div> </div> ) } export default observer(List)

İlk divs setinde kartlar oluşturmak için önyüklemeyi kullandım ve ayrıca uygulamanın sağ tarafına doğru hareket etmek için silme simgesini hizaladım. İlk olarak, list işlemek için bir kart bileşeni oluşturduk ve ardından sil button için bunun iki nesnesini kabul edecek ve listeye bir destek gönderecek bir düğme etiketi oluşturduk, bu tıklandığında seçilen liste öğesini kaldıracak. sayfada listelenir.

Sonraki, liste eklemek için giriş formumuzu ve proje başlığını içeren TitleInput'umuzdur .

TitleInput

Diğer projelerimize benzer şekilde, bileşenin App Store'dan sahne kabul edebilmesi için bir @observer işlevi ekleyeceğiz.

 import React, { useState } from 'react' import { observer } from 'mobx-react' function Navbar(props) { const [value, setValue] = useState("") const {addList} = props.store const prepareAddList = (e) => { e.preventDefault() addList(value) setValue("") } return ( <div className="container mt-3"> <h1 className="title">List App</h1> <form onSubmit={prepareAddList} className="form-group"> <div className="row ml-lg-2"> <input className="form-control-lg col-12 col-lg-9 col-sm-12 mr-3 border border-secondary" value={value} type="text" onChange={(e) => setValue(e.target.value)} placeholder="Enter list" /> <button className="col-lg-2 col-5 col-sm-5 mt-2 mt-lg-0 mt-sm-2 btn btn-lg btn-success font-weight-bold"> Add to List </button> </div> </form> </div> ) } export default observer(Navbar)

İlk olarak, bir başlangıç ​​durumu başlattık. React Hooks'u kullanarak, boş bir dizeye ayarladığımız values adı verilen bir başlangıç ​​durumu ekledik. Bunu giriş alanına girilenlerin değerini tutmak için kullanırız. React Hooks hakkında daha fazla bilgi edinmek için David Abiodun'un bu makalesine göz atabilirsiniz.

Ardından, addList mağazasına liste eklemek için bir nesne çağırdık ve onu uygulama mağazasından sahne olarak ilettik.

Daha sonra, giriş formları için bir olay nesnesini kabul etmek için preparedAddList bir AddList işlevi yarattık, ayrıca tıklama ile listeleri manuel olarak eklemek için bir düğme ekledik.

Neredeyse bitti, aşağıdakileri çalıştırarak proje sunucumuzu yeniden başlatmamız gerekiyor:

 yarn start

Ve TitleInput görünmelidir:

Artık tüm uygulama bileşenlerimizle işimiz bitti, bu yüzden onu App.js birleştirelim. Bunu yapmak için, titleInput ve ListDisplay bileşenlerini içe aktarmamız gerekiyor. Ayrıca Store bileşeninden mağazamızı içe aktarmamız gerekiyor.

MobX'in Uygulamamızda çalışması için, mağazadaki özellikleri ve işlevleri almaları için MobX mağazasını Uygulamamızda ve bireysel bileşenlerimizde sahne olarak geçirmemiz gerekir.

 import React from 'react'; import Navbar from "./components/navbar"; import ListDisplay from "./components/ListDisplay"; import {ListStore} from './ListStore'; function App() { const store = new ListStore() return ( <div> <Navbar store={store}/> <ListDisplay store={store}/> </div> ); } export default App;

Uygulamamız tamamlandığında şöyle görünmelidir:

Çözüm

MobX, özellikle React tabanlı uygulamalar için harika bir durum yöneticisidir, liste uygulamamızı oluşturarak MobX, durum, türevler ve eylemlerin temel kavramlarını öğrendik. Bu uygulamanın çalışan bir sürümü burada bulunabilir:

Durum yönetimini içeren bir sonraki oluşturacağınız uygulamada MobX'i kullanarak bunu daha da ileri götürebilirsiniz. Ne gibi yeni şeyler bulduğunu görmek isterim. MobX ve durum yönetimi uygulamaları hakkında daha fazla bilgiyi aşağıdaki referanslardan okuyabilirsiniz.

Kaynaklar ve Referanslar

• “MobX ile Native React — Başlarken,” Nader Dabit, Medium
• “Kavramlar ve İlkeler” MobX (resmi belgeler)
• “React Hooks ile En İyi Uygulamalar,” Adeneye David Abiodun, Smashing Magazine