Mobil uygulama geli\u015ftirme d\u00fcnyas\u0131nda React Native, platformlar aras\u0131 uyumlulu\u011fu ve geli\u015ftirici deneyimi sayesinde pop\u00fclerli\u011fini h\u0131zla art\u0131rm\u0131\u015ft\u0131r. Ancak, her b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamada oldu\u011fu gibi, React Native projelerinde de durum (state) y\u00f6netimi karma\u015f\u0131k bir hal alabilir. Uygulama b\u00fcy\u00fcd\u00fck\u00e7e, farkl\u0131 bile\u015fenler aras\u0131nda veri ak\u0131\u015f\u0131n\u0131 sa\u011flamak, durumu g\u00fcncel tutmak ve performans\u0131 optimize etmek giderek zorla\u015f\u0131r. \u0130\u015fte bu noktada MobX gibi durum y\u00f6netim k\u00fct\u00fcphaneleri devreye girer ve geli\u015ftiricilere daha basit, daha \u00f6ng\u00f6r\u00fclebilir ve daha performansl\u0131 bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n
Bu makalede, MobX’in temel prensiplerini, React Native ile nas\u0131l entegre edildi\u011fini, avantajlar\u0131n\u0131 ve en iyi uygulamalar\u0131n\u0131 derinlemesine inceleyece\u011fiz. MobX’in reaktif programlama yakla\u015f\u0131m\u0131yla, durum y\u00f6netimini nas\u0131l basitle\u015ftirdi\u011fini ve geli\u015ftiricilerin daha az kodla daha fazlas\u0131n\u0131 yapmas\u0131na olanak tan\u0131d\u0131\u011f\u0131n\u0131 g\u00f6rece\u011fiz. Amac\u0131m\u0131z, MobX’in g\u00fcc\u00fcn\u00fc ve sadeli\u011fini vurgulayarak, React Native projelerinizde durum y\u00f6netimini nas\u0131l daha verimli hale getirebilece\u011finizi g\u00f6stermektir.<\/p>\n
React Native uygulamalar\u0131, i\u00e7 i\u00e7e ge\u00e7mi\u015f bile\u015fen a\u011fa\u00e7lar\u0131ndan olu\u015fur. Her bile\u015fenin kendi i\u00e7 durumu (local state) olabilece\u011fi gibi, birden fazla bile\u015fen taraf\u0131ndan payla\u015f\u0131lan genel bir duruma (global state) da ihtiya\u00e7 duyulabilir. Uygulama karma\u015f\u0131kla\u015ft\u0131k\u00e7a, bu durum y\u00f6netimi a\u015fa\u011f\u0131daki nedenlerden dolay\u0131 kritik bir hal al\u0131r:<\/p>\n
* Veri Ak\u0131\u015f\u0131 Karma\u015f\u0131kl\u0131\u011f\u0131:<\/strong> Verilerin bile\u015fen a\u011fac\u0131nda yukar\u0131dan a\u015fa\u011f\u0131ya (props drilling) veya farkl\u0131 dallar aras\u0131nda ta\u015f\u0131nmas\u0131, kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 zorla\u015ft\u0131r\u0131r. Bu sorunlar\u0131 \u00e7\u00f6zmek i\u00e7in Redux, React Context API, Recoil, Zustand gibi \u00e7e\u015fitli durum y\u00f6netim \u00e7\u00f6z\u00fcmleri geli\u015ftirilmi\u015ftir. Her birinin kendine \u00f6zg\u00fc avantajlar\u0131 ve dezavantajlar\u0131 bulunmakla birlikte, MobX, \u00f6zellikle basitli\u011fi, reaktivitesi ve performans odakl\u0131 yakla\u015f\u0131m\u0131yla \u00f6ne \u00e7\u0131kar.<\/p>\n MobX, JavaScript uygulamalar\u0131 i\u00e7in basit, \u00f6l\u00e7eklenebilir durum y\u00f6netimi sa\u011flayan bir k\u00fct\u00fcphanedir. Temel felsefesi, uygulaman\u0131z\u0131n durumunu izlenebilir (observable) hale getirmek ve bu durumda meydana gelen de\u011fi\u015fikliklere otomatik olarak tepki vermektir. MobX, reaktif programlama prensiplerini kullanarak, “bir \u015feyler de\u011fi\u015fti\u011finde, onu kullanan her \u015fey otomatik olarak g\u00fcncellenir” mant\u0131\u011f\u0131yla \u00e7al\u0131\u015f\u0131r. Bu, manuel aboneliklere veya karma\u015f\u0131k da\u011f\u0131t\u0131m mekanizmalar\u0131na olan ihtiyac\u0131 ortadan kald\u0131r\u0131r.<\/p>\n MobX’in \u00e7ekirdek kavramlar\u0131 \u015funlard\u0131r:<\/p>\n Uygulaman\u0131z\u0131n durumunu temsil eden verilerdir. Bir JavaScript nesnesi, dizisi veya ilkel bir de\u011fer olabilirler. MobX, bu izlenebilir verilere eri\u015fildi\u011finde veya de\u011fi\u015ftirildi\u011finde bunu alg\u0131lar. Temel olarak, uygulaman\u0131z\u0131n “kayna\u011f\u0131”d\u0131r. MobX 6 ve sonras\u0131 s\u00fcr\u00fcmlerde, bir nesneyi izlenebilir yapmak i\u00e7in Burada Durumu de\u011fi\u015ftiren her \u015fey bir eylem olarak tan\u0131mlan\u0131r. MobX, eylemlerin i\u00e7inde yap\u0131lan t\u00fcm durum de\u011fi\u015fikliklerini tek bir “i\u015flem” olarak ele al\u0131r ve bu i\u015flem tamamlanana kadar reaksiyonlar\u0131 erteleyerek performans\u0131 optimize eder. Eylemler, durumun tutarl\u0131 bir \u015fekilde g\u00fcncellenmesini sa\u011flar. Yukar\u0131daki \u00f6rnekte \u0130zlenebilir durumdaki de\u011fi\u015fikliklere otomatik olarak tepki veren fonksiyonlard\u0131r. Reaksiyonlar, durum de\u011fi\u015fti\u011finde ne yap\u0131lmas\u0131 gerekti\u011fini belirtir. MobX’in \u00fc\u00e7 ana reaksiyon t\u00fcr\u00fc vard\u0131r:<\/p>\n * Computed Values (Hesaplanm\u0131\u015f De\u011ferler):<\/strong> Mevcut izlenebilir durumdan t\u00fcretilen de\u011ferlerdir. Ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fmedi\u011fi s\u00fcrece \u00f6nbelle\u011fe al\u0131n\u0131r ve performans\u0131 art\u0131r\u0131r. Yukar\u0131daki React bile\u015fenlerinin MobX durumuna ba\u011flanmas\u0131n\u0131 ve durum de\u011fi\u015fti\u011finde otomatik olarak yeniden render edilmesini sa\u011flayan mekanizmad\u0131r. MobX’in React Native projelerinde tercih edilmesinin bir\u00e7ok g\u00fc\u00e7l\u00fc nedeni vard\u0131r:<\/p>\n * Basitlik ve D\u00fc\u015f\u00fck \u00d6\u011frenme E\u011frisi:<\/strong> MobX’in temel prensipleri olduk\u00e7a sezgiseldir. JavaScript’in temel \u00f6zelliklerini (s\u0131n\u0131flar, nesneler, fonksiyonlar) kullanarak durum y\u00f6netimi yapman\u0131z\u0131 sa\u011flar. Redux gibi k\u00fct\u00fcphanelerdeki reducer’lar, middleware’ler, selector’lar gibi kavramlara k\u0131yasla daha az “boilerplate” kodu gerektirir. MobX’i React Native projenize entegre etmek olduk\u00e7a basittir.<\/p>\n 1. Gerekli Paketleri Kurma:<\/strong><\/p>\n Projenizin k\u00f6k dizininde a\u015fa\u011f\u0131daki komutlar\u0131 \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n * 2. Babel Yap\u0131land\u0131rmas\u0131 (\u0130ste\u011fe Ba\u011fl\u0131 ama \u00d6nerilir):<\/strong><\/p>\n MobX 6 ve sonras\u0131 s\u00fcr\u00fcmlerde E\u011fer projenizde Ard\u0131ndan Not:<\/strong> MobX 6 ile birlikte decorator’lar yerine \u015eimdi MobX’in React Native ile nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6stermek i\u00e7in basit bir saya\u00e7 uygulamas\u0131 geli\u015ftirelim.<\/p>\n Uygulaman\u0131n durumunu y\u00f6netecek bir MobX store olu\u015ftural\u0131m. Bu kodda: \u015eimdi bu store’u bir React Native bile\u015feninde kullanal\u0131m. Bu kodda: Uygulamay\u0131 \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, “Artt\u0131r” veya “Azalt” butonlar\u0131na bast\u0131\u011f\u0131n\u0131zda, MobX’in temelini anlad\u0131ktan sonra, daha karma\u015f\u0131k senaryolar i\u00e7in ileri seviye kavramlara ve en iyi uygulamalara g\u00f6z atal\u0131m.<\/p>\n B\u00fcy\u00fck uygulamalarda tek bir global store yerine, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerine odaklanan mod\u00fcler store’lar olu\u015fturmak daha iyi bir yakla\u015f\u0131md\u0131r. \u00d6rne\u011fin, bir Bu store’lara bile\u015fenlerden eri\u015fmek i\u00e7in React Context API’\u0131 kullanmak yayg\u0131n bir y\u00f6ntemdir. Bu yap\u0131, store’lar\u0131n\u0131z\u0131 uygulaman\u0131z\u0131n herhangi bir yerinden kolayca eri\u015filebilir k\u0131lar ve ba\u011f\u0131ml\u0131l\u0131k enjeksiyonunu y\u00f6netmenize yard\u0131mc\u0131 olur.<\/p>\n Veri \u00e7ekme (API \u00e7a\u011fr\u0131lar\u0131) gibi asenkron i\u015flemler, modern uygulamalar\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. MobX’te asenkron i\u015flemleri y\u00f6netmek i\u00e7in birka\u00e7 yol vard\u0131r:<\/p>\n * * * MobX store’lar\u0131, React bile\u015fenlerinden ba\u011f\u0131ms\u0131z olarak test edilebilir. Bu, birim testlerini kolayla\u015ft\u0131r\u0131r.<\/p>\n Bile\u015fenleri test ederken, store’lar\u0131 mock’layarak veya ger\u00e7ek store’lar\u0131 sa\u011flayarak test edebilirsiniz.<\/p>\n MobX, TypeScript ile m\u00fckemmel bir uyum i\u00e7indedir ve t\u00fcr g\u00fcvenli\u011fi sa\u011flar. TypeScript ile MobX kullanmak, \u00f6zellikle b\u00fcy\u00fck projelerde hata ay\u0131klamay\u0131 kolayla\u015ft\u0131r\u0131r ve kodun daha g\u00fcvenli olmas\u0131n\u0131 sa\u011flar.<\/p>\n MobX 6, k\u00fct\u00fcphanede \u00f6nemli de\u011fi\u015fiklikler ve iyile\u015ftirmeler getirdi. En belirgin de\u011fi\u015fiklik, decorator’lar\u0131n kullan\u0131m\u0131n\u0131n iste\u011fe ba\u011fl\u0131 hale gelmesi ve * * Bu modern yakla\u015f\u0131mlar, MobX’i daha eri\u015filebilir, daha performansl\u0131 ve gelece\u011fe d\u00f6n\u00fck hale getirmi\u015ftir.<\/p>\n MobX’i di\u011fer pop\u00fcler durum y\u00f6netim k\u00fct\u00fcphaneleriyle kar\u015f\u0131la\u015ft\u0131rmak, ne zaman MobX’i se\u00e7ece\u011finize karar vermenize yard\u0131mc\u0131 olabilir.<\/p>\n * Boilerplate:<\/strong> MobX, Redux’a g\u00f6re \u00f6nemli \u00f6l\u00e7\u00fcde daha az boilerplate kodu gerektirir. Redux’ta reducer’lar, action type’lar, action creator’lar, middleware’ler gibi bir\u00e7ok soyutlama varken, MobX do\u011frudan nesneler ve metodlarla \u00e7al\u0131\u015f\u0131r. Redux, durumun ge\u00e7mi\u015fini izleme (time-travel debugging) ve daha kat\u0131 bir yap\u0131land\u0131rma gerektiren projeler i\u00e7in hala g\u00fc\u00e7l\u00fc bir se\u00e7enektir. MobX ise basitli\u011fi, esnekli\u011fi ve do\u011frudan reaktivitesi ile \u00f6ne \u00e7\u0131kar.<\/p>\n * \u00d6l\u00e7eklenebilirlik:<\/strong> K\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli uygulamalar i\u00e7in React Context API ve Genel olarak, MobX, Redux’un kat\u0131 yap\u0131s\u0131ndan s\u0131k\u0131lan veya React Context’in \u00f6l\u00e7eklenebilirlik s\u0131n\u0131rlar\u0131na ula\u015fan geli\u015ftiriciler i\u00e7in g\u00fc\u00e7l\u00fc ve basitle\u015ftirilmi\u015f bir alternatif sunar.<\/p>\n Bu makalede, MobX’in React Native ile durum y\u00f6netimini nas\u0131l basitle\u015ftirdi\u011fini, temel kavramlar\u0131n\u0131, kurulumunu ve pratik bir \u00f6rnek \u00fczerinden kullan\u0131m\u0131n\u0131 inceledik. Ayr\u0131ca, ileri seviye konulara, en iyi uygulamalara ve MobX 6’n\u0131n getirdi\u011fi modern yakla\u015f\u0131mlara de\u011findik.<\/p>\n MobX, reaktif programlama prensiplerini kullanarak, geli\u015ftiricilerin uygulaman\u0131n i\u015f mant\u0131\u011f\u0131na odaklanmas\u0131n\u0131 ve durum y\u00f6netiminin karma\u015f\u0131kl\u0131\u011f\u0131ndan kurtulmas\u0131n\u0131 sa\u011flar. Daha az boilerplate kodu, otomatik reaktivite, \u00fcst\u00fcn performans ve esneklik sunarak, React Native projelerinizde daha verimli ve keyifli bir geli\u015ftirme deneyimi vaat eder.<\/p>\n E\u011fer mevcut durum y\u00f6netim \u00e7\u00f6z\u00fcm\u00fcn\u00fcz\u00fcn karma\u015f\u0131kl\u0131\u011f\u0131ndan \u015fikayet\u00e7iyseniz veya yeni bir React Native projesine ba\u015flarken daha basit ve g\u00fc\u00e7l\u00fc bir alternatif ar\u0131yorsan\u0131z, MobX’i denemenizi \u015fiddetle tavsiye ederiz. MobX, “bir \u015feyler de\u011fi\u015fti\u011finde, onu kullanan her \u015fey otomatik olarak g\u00fcncellenir” felsefesiyle, durum y\u00f6netimini ger\u00e7ekten basitle\u015ftirir ve geli\u015ftiricilerin daha h\u0131zl\u0131 ve daha g\u00fcvenle kod yazmas\u0131na olanak tan\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"MobX ile React Native: Basitle\u015ftirilmi\u015f Bir Yakla\u015f\u0131m\nMobil uygulama geli\u015ftirme d\u00fcnyas\u0131nda React Native, platformlar aras\u0131 uyumlulu\u011fu ve geli","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-36176","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
\n* Senkronizasyon Sorunlar\u0131:<\/strong> Ayn\u0131 veriye birden fazla yerden eri\u015fildi\u011finde veya g\u00fcncellendi\u011finde, tutars\u0131z durumlar ortaya \u00e7\u0131kabilir.
\n* Performans Kayg\u0131lar\u0131:<\/strong> Gereksiz yere yeniden render edilen bile\u015fenler, uygulama performans\u0131n\u0131 olumsuz etkiler. \u00d6zellikle mobil cihazlarda bu durum daha da belirginle\u015febilir.
\n* Kodun Bak\u0131m\u0131 ve \u00d6l\u00e7eklenebilirlik:<\/strong> \u0130yi yap\u0131land\u0131r\u0131lmam\u0131\u015f bir durum y\u00f6netimi, uygulaman\u0131n b\u00fcy\u00fcmesini engeller ve yeni \u00f6zellik eklemeyi zorla\u015ft\u0131r\u0131r.<\/p>\nMobX Nedir? Temel Kavramlar<\/h3>\n
Observables (\u0130zlenebilirler)<\/h4>\n
makeObservable<\/code> veya makeAutoObservable<\/code> fonksiyonlar\u0131 kullan\u0131l\u0131r. \u00d6rne\u011fin:<\/p>\nimport { makeObservable, observable, action, computed } from 'mobx';\n\nclass CounterStore {\n count = 0;\n\n constructor() {\n makeObservable(this, {\n count: observable,\n increment: action,\n decrement: action,\n doubleCount: computed\n });\n }\n\n increment() {\n this.count++;\n }\n\n decrement() {\n this.count--;\n }\n\n get doubleCount() {\n return this.count * 2;\n }\n}<\/code><\/pre>\ncount<\/code> bir observable<\/code> olarak i\u015faretlenmi\u015ftir. Bu sayede MobX, count<\/code> de\u011ferindeki de\u011fi\u015fiklikleri takip edebilir.<\/p>\nActions (Eylemler)<\/h4>\n
increment<\/code> ve decrement<\/code> metodlar\u0131 birer action<\/code>‘d\u0131r.<\/p>\nReactions (Reaksiyonlar)<\/h4>\n
doubleCount<\/code> \u00f6rne\u011fi bir computed<\/code> de\u011ferdir.
\n* Autorun:<\/strong> Bir fonksiyonun i\u00e7inde kullan\u0131lan izlenebilir de\u011ferler de\u011fi\u015fti\u011finde otomatik olarak yeniden \u00e7al\u0131\u015fan reaksiyonlard\u0131r. Genellikle yan etkiler (loglama, veritaban\u0131 g\u00fcncellemeleri vb.) i\u00e7in kullan\u0131l\u0131r.
\n* Reaction:<\/strong> autorun<\/code>‘a benzer ancak hangi verinin izlenece\u011fini ve reaksiyonun ne zaman tetiklenece\u011fini daha hassas bir \u015fekilde kontrol etmenizi sa\u011flar.
\n* When:<\/strong> Bir ko\u015ful do\u011fru oldu\u011funda tek bir kez \u00e7al\u0131\u015fan reaksiyondur.<\/p>\nObservers (G\u00f6zlemciler)<\/h4>\n
mobx-react-lite<\/code> k\u00fct\u00fcphanesindeki observer<\/code> HOC’u (Higher-Order Component) veya useObserver<\/code> hook’u ile bile\u015fenler izlenebilir duruma ba\u011flan\u0131r. Bu sayede, sadece ilgili durum de\u011fi\u015fti\u011finde bile\u015fen yeniden render edilir, gereksiz render’lar \u00f6nlenir.<\/p>\nReact Native i\u00e7in MobX Neden Tercih Edilmeli? Avantajlar\u0131<\/h3>\n
\n* Reaktivite ve Otomatik G\u00fcncellemeler:<\/strong> MobX, durumdaki de\u011fi\u015fiklikleri otomatik olarak alg\u0131lar ve bu duruma ba\u011f\u0131ml\u0131 olan bile\u015fenleri veya di\u011fer reaksiyonlar\u0131 tetikler. Bu “otomatik” yakla\u015f\u0131m, geli\u015ftiricinin manuel olarak abonelikleri y\u00f6netme veya g\u00fcncellemeleri tetikleme ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r.
\n* Performans:<\/strong> MobX, ince taneli (fine-grained) reaktiviteye sahiptir. Yani, sadece de\u011fi\u015fen veriye ba\u011f\u0131ml\u0131 olan bile\u015fenleri veya k\u0131s\u0131mlar\u0131 yeniden render eder. Bu, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Gereksiz yeniden render’lar engellenir.
\n* Esneklik:<\/strong> MobX, durumunuzu nas\u0131l yap\u0131land\u0131raca\u011f\u0131n\u0131z konusunda size tam \u00f6zg\u00fcrl\u00fck tan\u0131r. \u0130ster tek bir global store, ister birden fazla mod\u00fcler store kullanabilirsiniz. Model katman\u0131n\u0131zla s\u0131k\u0131 bir \u015fekilde entegre olabilir.
\n* Geli\u015ftirici Deneyimi:<\/strong> Daha az kod yazmak, daha az hata yapmak ve daha h\u0131zl\u0131 geli\u015ftirmek anlam\u0131na gelir. MobX’in basit ve do\u011frudan yakla\u015f\u0131m\u0131, geli\u015ftiricilerin uygulaman\u0131n i\u015f mant\u0131\u011f\u0131na odaklanmas\u0131n\u0131 sa\u011flar.
\n* TypeScript Deste\u011fi:<\/strong> MobX, TypeScript ile m\u00fckemmel bir uyum i\u00e7indedir. Bu, b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalarda t\u00fcr g\u00fcvenli\u011fi ve kod kalitesi a\u00e7\u0131s\u0131ndan \u00f6nemli bir avantaj sa\u011flar.<\/p>\nMobX’i Bir React Native Projesine Kurma<\/h3>\n
npm install mobx mobx-react-lite\nveya<\/h2>\nyarn add mobx mobx-react-lite<\/code><\/pre>\n
mobx<\/code>: MobX’in \u00e7ekirdek k\u00fct\u00fcphanesi.
\n* mobx-react-lite<\/code>: React bile\u015fenlerini MobX store’lar\u0131na ba\u011flamak i\u00e7in hafif ve performansl\u0131 bir k\u00fct\u00fcphane. \u00d6zellikle functional bile\u015fenler i\u00e7in tasarlanm\u0131\u015ft\u0131r.<\/p>\nmakeObservable<\/code> ve makeAutoObservable<\/code> gibi fonksiyonlar decorator’lara alternatif olarak sunuldu\u011fu i\u00e7in Babel yap\u0131land\u0131rmas\u0131 zorunlu de\u011fildir. Ancak, hala decorator s\u00f6zdizimini kullanmak isterseniz (ki bu genellikle daha k\u0131sa ve okunabilir kod sa\u011flar), Babel’\u0131 yap\u0131land\u0131rman\u0131z gerekebilir.<\/p>\nbabel.config.js<\/code> dosyas\u0131 varsa, @babel\/plugin-proposal-decorators<\/code> ve @babel\/plugin-proposal-class-properties<\/code> eklentilerini kurup yap\u0131land\u0131rman\u0131z gerekir:<\/p>\nnpm install --save-dev @babel\/plugin-proposal-decorators @babel\/plugin-proposal-class-properties\nveya<\/h2>\nyarn add --dev @babel\/plugin-proposal-decorators @babel\/plugin-proposal-class-properties<\/code><\/pre>\n
babel.config.js<\/code> dosyan\u0131z\u0131 a\u015fa\u011f\u0131daki gibi g\u00fcncelleyin:<\/p>\nmodule.exports = {\n presets: ['module:metro-react-native-babel-preset'],\n plugins: [\n ['@babel\/plugin-proposal-decorators', { 'legacy': true }],\n ['@babel\/plugin-proposal-class-properties', { 'loose': true }]\n ]\n};<\/code><\/pre>\nmakeObservable<\/code> veya makeAutoObservable<\/code> kullanmak, Babel yap\u0131land\u0131rmas\u0131na olan ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 azalt\u0131r ve \u00e7o\u011fu durumda daha modern bir yakla\u015f\u0131md\u0131r. Bu makaledeki \u00f6rneklerde makeObservable<\/code> yakla\u015f\u0131m\u0131n\u0131 kullanaca\u011f\u0131z.<\/p>\nBasit Bir Saya\u00e7 Uygulamas\u0131 ile MobX’i Anlamak<\/h3>\n
Ad\u0131m 1: MobX Store Olu\u015fturma<\/h4>\n
stores\/CounterStore.js<\/code> ad\u0131nda bir dosya olu\u015fturun:<\/p>\n\/\/ stores\/CounterStore.js\nimport { makeObservable, observable, action, computed } from 'mobx';\n\nclass CounterStore {\n count = 0; \/\/ \u0130zlenebilir durum\n\n constructor() {\n \/\/ 'this' nesnesindeki \u00f6zellikleri izlenebilir, eylem veya hesaplanm\u0131\u015f olarak i\u015faretler\n makeObservable(this, {\n count: observable,\n increment: action,\n decrement: action,\n doubleCount: computed\n });\n }\n\n \/\/ Eylemler: Durumu de\u011fi\u015ftiren metodlar\n increment = () => {\n this.count++;\n };\n\n decrement = () => {\n this.count--;\n };\n\n \/\/ Hesaplanm\u0131\u015f de\u011fer: Durumdan t\u00fcretilen de\u011fer\n get doubleCount() {\n console.log('doubleCount hesapland\u0131'); \/\/ Sadece ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fti\u011finde \u00e7al\u0131\u015f\u0131r\n return this.count * 2;\n }\n}\n\n\/\/ Store'un bir \u00f6rne\u011fini d\u0131\u015fa aktar\u0131yoruz, b\u00f6ylece uygulamada tek bir \u00f6rnek kullan\u0131l\u0131r (Singleton)\nexport const counterStore = new CounterStore();<\/code><\/pre>\n
\n* count<\/code> de\u011fi\u015fkeni observable<\/code> olarak i\u015faretlendi. Bu, MobX’in bu de\u011fi\u015fkenin de\u011ferindeki de\u011fi\u015fiklikleri takip edece\u011fi anlam\u0131na gelir.
\n* increment<\/code> ve decrement<\/code> metodlar\u0131 action<\/code> olarak i\u015faretlendi. Bu metodlar count<\/code> de\u011ferini de\u011fi\u015ftirir.
\n* doubleCount<\/code> bir computed<\/code> de\u011ferdir. count<\/code> de\u011feri de\u011fi\u015fti\u011finde otomatik olarak yeniden hesaplan\u0131r ve \u00f6nbelle\u011fe al\u0131n\u0131r.<\/p>\nAd\u0131m 2: React Native Bile\u015fenini Ba\u011flama<\/h4>\n
App.js<\/code> dosyan\u0131z\u0131 a\u015fa\u011f\u0131daki gibi g\u00fcncelleyin:<\/p>\n\/\/ App.js\nimport React from 'react';\nimport { View, Text, Button, StyleSheet } from 'react-native';\nimport { observer } from 'mobx-react-lite'; \/\/ observer HOC'u\nimport { counterStore } from '.\/stores\/CounterStore'; \/\/ Store'umuzu i\u00e7e aktar\u0131yoruz\n\n\/\/ observer HOC'u, bile\u015fenin MobX store'undaki de\u011fi\u015fikliklere tepki vermesini sa\u011flar\nconst Counter = observer(() => {\n return (\n
\n* observer<\/code> HOC’u, Counter<\/code> bile\u015feninin counterStore<\/code> i\u00e7indeki count<\/code> ve doubleCount<\/code> de\u011ferlerindeki de\u011fi\u015fikliklere tepki vermesini sa\u011flar.
\n* counterStore.count<\/code> ve counterStore.doubleCount<\/code> de\u011ferlerine do\u011frudan eri\u015fiyoruz.
\n* counterStore.increment<\/code> ve counterStore.decrement<\/code> metodlar\u0131n\u0131 butonlar\u0131n onPress<\/code> olaylar\u0131na ba\u011fl\u0131yoruz.<\/p>\ncounterStore.count<\/code> de\u011feri de\u011fi\u015fecek, bu de\u011fi\u015fiklik observer<\/code> taraf\u0131ndan alg\u0131lanacak ve Counter<\/code> bile\u015feni otomatik olarak yeniden render edilecektir. Ayr\u0131ca, count<\/code> de\u011feri de\u011fi\u015fti\u011fi i\u00e7in doubleCount<\/code> da yeniden hesaplanacak ve g\u00fcncellenecektir. Konsolda doubleCount hesapland\u0131<\/code> mesaj\u0131n\u0131n sadece count<\/code> de\u011feri de\u011fi\u015fti\u011finde \u00e7\u0131kt\u0131\u011f\u0131n\u0131 g\u00f6receksiniz, bu da computed<\/code> de\u011ferlerin nas\u0131l \u00f6nbelle\u011fe al\u0131nd\u0131\u011f\u0131n\u0131 g\u00f6sterir.<\/p>\n\u0130leri Seviye MobX Kavramlar\u0131 ve En \u0130yi Uygulamalar<\/h3>\n
Store Yap\u0131s\u0131 ve Y\u00f6netimi<\/h4>\n
AuthStore<\/code>, bir UserStore<\/code>, bir ProductStore<\/code> vb. Her store, kendi ilgili durumunu ve eylemlerini y\u00f6netir.<\/p>\nmobx-react-lite<\/code> k\u00fct\u00fcphanesi, store’lar\u0131 sa\u011flamak i\u00e7in \u00f6zel bir Provider<\/code> bile\u015feni veya useContext<\/code> ile birlikte kullan\u0131labilen bir ba\u011flam (MobXProviderContext<\/code>) sa\u011flamaz. Bunun yerine, kendi Context’inizi olu\u015fturup store’lar\u0131n\u0131z\u0131 sa\u011flayabilirsiniz:<\/p>\n\/\/ stores\/index.js\nimport { createContext, useContext } from 'react';\nimport { counterStore } from '.\/CounterStore';\nimport { userStore } from '.\/UserStore'; \/\/ Varsay\u0131msal bir ba\u015fka store\n\nexport const rootStore = {\n counterStore,\n userStore,\n};\n\nexport const StoreContext = createContext(rootStore);\n\nexport const useStore = () => useContext(StoreContext);\n\n\/\/ App.js veya root bile\u015feninizde\nimport { StoreContext, rootStore } from '.\/stores';\n\nconst App = () => {\n return (\n Asenkron \u0130\u015flemler<\/h4>\n
runInAction<\/code>:<\/strong> En basit yol, asenkron bir i\u015flemin sonucunu ald\u0131ktan sonra durumu g\u00fcncellemek i\u00e7in runInAction<\/code> kullanmakt\u0131r. Bu, birden fazla durumu atomik olarak g\u00fcncellemenizi sa\u011flar.<\/p>\nimport { makeObservable, observable, action, runInAction } from 'mobx';\n\n class TodoStore {\n todos = [];\n isLoading = false;\n\n constructor() {\n makeObservable(this, {\n todos: observable,\n isLoading: observable,\n fetchTodos: action\n });\n }\n\n fetchTodos = async () => {\n this.isLoading = true; \/\/ isLoading'i action d\u0131\u015f\u0131nda g\u00fcncelleyemezsiniz, bu bir uyar\u0131 verir.\n \/\/ Asenkron fonksiyonlar varsay\u0131lan olarak action de\u011fildir.\n try {\n const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/todos');\n const data = await response.json();\n runInAction(() => { \/\/ Durum g\u00fcncellemelerini atomik bir eylem i\u00e7inde yap\u0131n\n this.todos = data.slice(0, 5);\n this.isLoading = false;\n });\n } catch (error) {\n console.error(\"Failed to fetch todos\", error);\n runInAction(() => {\n this.isLoading = false;\n });\n }\n };\n }<\/code><\/pre>\nflow<\/code> (MobX 6+):<\/strong> MobX 6 ile tan\u0131t\u0131lan flow<\/code>, asenkron eylemleri y\u00f6netmek i\u00e7in daha temiz ve yap\u0131land\u0131r\u0131lm\u0131\u015f bir yol sunar. Generator fonksiyonlar\u0131n\u0131 kullanarak asenkron ak\u0131\u015flar\u0131 tan\u0131mlaman\u0131za olanak tan\u0131r. flow<\/code> i\u00e7inde yield<\/code> ile beklenen her i\u015flem, MobX taraf\u0131ndan otomatik olarak bir eylem i\u00e7inde sar\u0131l\u0131r.<\/p>\nimport { makeObservable, observable, flow } from 'mobx';\n\n class TodoStore {\n todos = [];\n isLoading = false;\n\n constructor() {\n makeObservable(this, {\n todos: observable,\n isLoading: observable,\n fetchTodos: flow \/\/ fetchTodos'u bir flow olarak i\u015faretle\n });\n }\n\n *fetchTodos() { \/\/ Generator fonksiyonu\n this.isLoading = true;\n try {\n const response = yield fetch('https:\/\/jsonplaceholder.typicode.com\/todos');\n const data = yield response.json();\n this.todos = data.slice(0, 5); \/\/ Durum g\u00fcncellemeleri otomatik olarak action i\u00e7inde sar\u0131l\u0131r\n this.isLoading = false;\n } catch (error) {\n console.error(\"Failed to fetch todos\", error);\n this.isLoading = false;\n }\n }\n }<\/code><\/pre>\nflow<\/code> kullan\u0131m\u0131, asenkron ak\u0131\u015flar\u0131 daha okunabilir ve y\u00f6netilebilir hale getirir.<\/p>\nPerformans \u0130pu\u00e7lar\u0131<\/h4>\n
observer<\/code>‘\u0131 Do\u011fru Yerlerde Kullan\u0131n:<\/strong> observer<\/code> HOC’unu veya useObserver<\/code> hook’unu sadece MobX store’lar\u0131na do\u011frudan ba\u011f\u0131ml\u0131 olan bile\u015fenlerde kullan\u0131n. Bile\u015fen a\u011fac\u0131n\u0131z\u0131n derinliklerinde, MobX durumuna do\u011frudan eri\u015fmeyen veya sadece props alan bile\u015fenleri observer<\/code> ile sarmalamak gereksizdir.
\n* \u0130nce Taneli G\u00f6zlem:<\/strong> MobX’in en b\u00fcy\u00fck avantajlar\u0131ndan biri ince taneli g\u00f6zlem yetene\u011fidir. Bir bile\u015fen i\u00e7inde yaln\u0131zca ihtiya\u00e7 duydu\u011funuz belirli bir g\u00f6zlenebilir \u00f6zelli\u011fe eri\u015fin. T\u00fcm bir nesneyi prop olarak ge\u00e7mek yerine, sadece ilgili \u00f6zelli\u011fi ge\u00e7in.
\n* computed<\/code> De\u011ferleri Ak\u0131ll\u0131ca Kullan\u0131n:<\/strong> computed<\/code> de\u011ferler, pahal\u0131 hesaplamalar\u0131 \u00f6nbelle\u011fe alarak performans\u0131 art\u0131r\u0131r. Bir de\u011fer birden fazla yerde kullan\u0131l\u0131yor ve ba\u015fka izlenebilir de\u011ferlerden t\u00fcretiliyorsa, onu computed<\/code> olarak tan\u0131mlay\u0131n.
\n* reaction<\/code> ve autorun<\/code> Dikkatli Kullan\u0131m\u0131:<\/strong> Bu reaksiyonlar g\u00fc\u00e7l\u00fcd\u00fcr ancak dikkatli kullan\u0131lmal\u0131d\u0131r. Sonsuz d\u00f6ng\u00fclere veya beklenmedik yan etkilere yol a\u00e7abilirler. Genellikle UI d\u0131\u015f\u0131 yan etkiler i\u00e7in kullan\u0131l\u0131rlar (\u00f6rne\u011fin, loglama, depolama).<\/p>\nTest Etme<\/h4>\n
\/\/ tests\/CounterStore.test.js\nimport { counterStore } from '..\/stores\/CounterStore';\n\ndescribe('CounterStore', () => {\n beforeEach(() => {\n counterStore.count = 0; \/\/ Her testten \u00f6nce durumu s\u0131f\u0131rla\n });\n\n test('should increment the count', () => {\n counterStore.increment();\n expect(counterStore.count).toBe(1);\n });\n\n test('should decrement the count', () => {\n counterStore.decrement();\n expect(counterStore.count).toBe(-1);\n });\n\n test('should return double the count', () => {\n counterStore.increment();\n expect(counterStore.doubleCount).toBe(2);\n counterStore.increment();\n expect(counterStore.doubleCount).toBe(4);\n });\n});<\/code><\/pre>\nTypeScript ile MobX<\/h4>\n
makeObservable<\/code> veya makeAutoObservable<\/code> kullan\u0131rken, TypeScript otomatik olarak t\u00fcr \u00e7\u0131kar\u0131m\u0131 yapar. Decorator kullan\u0131yorsan\u0131z, tsconfig.json<\/code> dosyan\u0131zda experimentalDecorators<\/code> ve emitDecoratorMetadata<\/code> se\u00e7eneklerini etkinle\u015ftirmeniz gerekir.<\/p>\n\/\/ stores\/CounterStore.ts\nimport { makeObservable, observable, action, computed } from 'mobx';\n\ninterface ICounterStore {\n count: number;\n increment(): void;\n decrement(): void;\n doubleCount: number;\n}\n\nclass CounterStore implements ICounterStore {\n count: number = 0;\n\n constructor() {\n makeObservable(this, {\n count: observable,\n increment: action,\n decrement: action,\n doubleCount: computed\n });\n }\n\n increment = () => {\n this.count++;\n };\n\n decrement = () => {\n this.count--;\n };\n\n get doubleCount() {\n return this.count * 2;\n }\n}\n\nexport const counterStore = new CounterStore();<\/code><\/pre>\nMobX 6 ve Sonras\u0131: Modern Yakla\u015f\u0131m<\/h3>\n
makeObservable<\/code> ile makeAutoObservable<\/code> fonksiyonlar\u0131n\u0131n tercih edilen y\u00f6ntemler haline gelmesidir.<\/p>\nmakeObservable<\/code>:<\/strong> Bir nesnenin \u00f6zelliklerini a\u00e7\u0131k\u00e7a observable<\/code>, action<\/code> veya computed<\/code> olarak i\u015faretlemenizi sa\u011flar. Bu, daha az sihir ve daha fazla kontrol anlam\u0131na gelir.
\n* makeAutoObservable<\/code>:<\/strong> Daha az kod yazmak isteyenler i\u00e7in h\u0131zl\u0131 bir yoldur. Bir s\u0131n\u0131f\u0131n t\u00fcm \u00f6zelliklerini ve getter’lar\u0131n\u0131 otomatik olarak observable<\/code> veya computed<\/code> (getter’lar i\u00e7in) olarak i\u015faretlerken, metodlar\u0131 action<\/code> olarak i\u015faretler.<\/p>\nimport { makeAutoObservable } from 'mobx';\n\n class CounterStore {\n count = 0;\n\n constructor() {\n makeAutoObservable(this); \/\/ T\u00fcm \u00f6zellikleri otomatik olarak izlenebilir yapar\n }\n\n increment = () => {\n this.count++;\n };\n\n decrement = () => {\n this.count--;\n };\n\n get doubleCount() {\n return this.count * 2;\n }\n }<\/code><\/pre>\nmakeAutoObservable<\/code> ile kod daha da sadele\u015fir.<\/p>\nflow<\/code>:<\/strong> Daha \u00f6nce de belirtildi\u011fi gibi, asenkron eylemler i\u00e7in flow<\/code> kullan\u0131m\u0131 daha temiz ve yap\u0131land\u0131r\u0131lm\u0131\u015f bir yakla\u015f\u0131m sunar.
\n* mobx-react-lite<\/code>:<\/strong> mobx-react<\/code> k\u00fct\u00fcphanesinin daha hafif ve modern bir alternatifi olarak \u00f6ne \u00e7\u0131kar. Functional bile\u015fenler ve hook’lar ile daha iyi uyum sa\u011flar. observer<\/code> HOC’u ve useLocalStore<\/code> (art\u0131k useObserver<\/code> hook’u ile birlikte kullan\u0131lmas\u0131 \u00f6nerilir) gibi ara\u00e7lar sunar.<\/p>\nMobX vs. Di\u011fer Durum Y\u00f6netimi \u00c7\u00f6z\u00fcmleri<\/h3>\n
MobX vs. Redux<\/h4>\n
\n* De\u011fi\u015fmezlik (Immutability):<\/strong> Redux, durumun de\u011fi\u015fmezli\u011fini (immutability) zorunlu k\u0131lar. Bu, durum de\u011fi\u015fikliklerinin izlenmesini kolayla\u015ft\u0131r\u0131r ancak karma\u015f\u0131k g\u00fcncellemeler i\u00e7in ekstra kod gerektirebilir. MobX ise durumu do\u011frudan de\u011fi\u015ftirmenize (mutability) izin verir ve de\u011fi\u015fiklikleri otomatik olarak alg\u0131lar.
\n* \u00d6\u011frenme E\u011frisi:<\/strong> MobX’in \u00f6\u011frenme e\u011frisi Redux’a g\u00f6re genellikle daha d\u00fc\u015f\u00fckt\u00fcr.
\n* Performans:<\/strong> Her ikisi de iyi performans sunabilir. Ancak MobX’in ince taneli reaktivitesi, bazen daha az gereksiz render’a yol a\u00e7abilir. Redux’ta, selector<\/code>‘lar\u0131 do\u011fru kullanmak ve reselect<\/code> gibi k\u00fct\u00fcphanelerle memoizasyon yapmak performans\u0131 art\u0131r\u0131r.<\/p>\nMobX vs. React Context\/useState<\/h4>\n
useState<\/code>\/useReducer<\/code> yeterli olabilir. Ancak uygulama b\u00fcy\u00fcd\u00fck\u00e7e ve durum karma\u015f\u0131kla\u015ft\u0131k\u00e7a, Context API’\u0131n performans\u0131 (\u00f6zellikle birden fazla Context kullan\u0131ld\u0131\u011f\u0131nda ve gereksiz render’lar olu\u015ftu\u011funda) ve y\u00f6netim zorlu\u011fu artabilir. MobX, b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar i\u00e7in daha sa\u011flam bir \u00e7\u00f6z\u00fcm sunar.
\n* Reaktivite:<\/strong> React Context, bir Context’in de\u011feri de\u011fi\u015fti\u011finde, o Context’i t\u00fcketen t\u00fcm bile\u015fenleri yeniden render eder. MobX ise sadece de\u011fi\u015fen veriye ba\u011f\u0131ml\u0131 olan bile\u015fenleri yeniden render eder, bu da daha verimli bir reaktivite sa\u011flar.
\n* Boilerplate:<\/strong> MobX, useReducer<\/code> ile kar\u015f\u0131la\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda daha az boilerplate kodu gerektirir, \u00f6zellikle karma\u015f\u0131k durum g\u00fcncellemeleri i\u00e7in.<\/p>\nSonu\u00e7<\/h3>\n