B\u00fcy\u00fck \u00f6l\u00e7ekli React uygulamalar\u0131nda durum y\u00f6netimi, geli\u015ftiricilerin s\u0131kl\u0131kla kar\u015f\u0131la\u015ft\u0131\u011f\u0131 karma\u015f\u0131k bir meydan okumad\u0131r. Uygulama b\u00fcy\u00fcd\u00fck\u00e7e, veri ak\u0131\u015f\u0131n\u0131 y\u00f6netmek, bile\u015fenler aras\u0131 ileti\u015fimi sa\u011flamak ve performans\u0131 optimize etmek giderek zorla\u015f\u0131r. Bu durum, geli\u015ftirme s\u00fcrecini yava\u015flatabilir, hatalara yol a\u00e7abilir ve uygulaman\u0131n s\u00fcrd\u00fcr\u00fclebilirli\u011fini olumsuz etkileyebilir. Peki, bu karma\u015f\u0131kl\u0131\u011f\u0131 basitle\u015ftirmenin, geli\u015ftirici verimlili\u011fini art\u0131rman\u0131n ve ayn\u0131 zamanda y\u00fcksek performans sunman\u0131n bir yolu var m\u0131? \u0130\u015fte tam da bu noktada, hafifli\u011fi ve kullan\u0131m kolayl\u0131\u011f\u0131 ile \u00f6ne \u00e7\u0131kan Zustand devreye giriyor. Bu makalede, kurumsal React uygulamalar\u0131nda Zustand’\u0131n g\u00fcc\u00fcn\u00fc ke\u015ffedecek, temel prensiplerinden ileri d\u00fczey kullan\u0131m senaryolar\u0131na kadar her y\u00f6n\u00fcn\u00fc detayl\u0131ca inceleyece\u011fiz.<\/p>\n
Herhangi bir modern web uygulamas\u0131n\u0131n kalbinde durum (state) yer al\u0131r. Durum, uygulaman\u0131n belirli bir andaki verilerini ve kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn (UI) g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc belirleyen bilgiler b\u00fct\u00fcn\u00fcd\u00fcr. React gibi bile\u015fen tabanl\u0131 k\u00fct\u00fcphanelerde, her bile\u015fenin kendi i\u00e7 durumu olabilir. Ancak, uygulama b\u00fcy\u00fcd\u00fck\u00e7e ve farkl\u0131 bile\u015fenlerin ayn\u0131 verilere eri\u015fmesi veya birbirleriyle ileti\u015fim kurmas\u0131 gerekti\u011finde, bu yerel durum y\u00f6netimi yakla\u015f\u0131m\u0131 yetersiz kalmaya ba\u015flar. \u0130\u015fte bu noktada global durum y\u00f6netimi (global state management) ihtiyac\u0131 do\u011far.<\/p>\n
\u00d6zellikle kurumsal d\u00fczeydeki uygulamalarda durum y\u00f6netiminin \u00f6nemi katlanarak artar. Bir e-ticaret uygulamas\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcn: kullan\u0131c\u0131 sepetindeki \u00fcr\u00fcnler, oturum a\u00e7ma bilgileri, sipari\u015f ge\u00e7mi\u015fi, \u00fcr\u00fcn filtreleri ve \u00e7ok daha fazlas\u0131 uygulaman\u0131n farkl\u0131 yerlerinde eri\u015filmesi ve g\u00fcncellenmesi gereken global durum par\u00e7alar\u0131d\u0131r. Bu verilerin tutarl\u0131, g\u00fcvenli ve performansl\u0131 bir \u015fekilde y\u00f6netilmesi, hem kullan\u0131c\u0131 deneyimi hem de uygulaman\u0131n genel sa\u011fl\u0131\u011f\u0131 i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n
Geleneksel React yakla\u015f\u0131mlar\u0131nda, bir veriyi alt bile\u015fenlere aktarmak i\u00e7in prop drilling (prop zincirleme) ad\u0131 verilen bir y\u00f6ntem kullan\u0131l\u0131r. Bu, verinin bir\u00e7ok ara bile\u015fenden ge\u00e7irilmesi anlam\u0131na gelir ve b\u00fcy\u00fck uygulamalarda kodu okunmaz, bak\u0131m\u0131 zor ve hata yapmaya a\u00e7\u0131k hale getirir. Ayr\u0131ca, Context API gibi React’\u0131n kendi yerle\u015fik \u00e7\u00f6z\u00fcmleri, basit senaryolar i\u00e7in harika olsa da, s\u0131k g\u00fcncellenen ve \u00e7ok say\u0131da t\u00fcketiciye sahip global durumlar i\u00e7in performans sorunlar\u0131na yol a\u00e7abilir, \u00e7\u00fcnk\u00fc ba\u011flam (context) de\u011fi\u015fti\u011finde ona abone olan t\u00fcm bile\u015fenler yeniden render (yeniden \u00e7izim) edilir.<\/p>\n
Durum y\u00f6netimi \u00e7\u00f6z\u00fcmleri, bu sorunlara merkezi bir depo (store) veya ma\u011faza sa\u011flayarak yan\u0131t verir. Bu ma\u011faza, uygulaman\u0131n global durumunu tek bir yerde tutar ve bile\u015fenlerin bu duruma do\u011frudan eri\u015fmesini veya g\u00fcncellemesini sa\u011flar. Bu sayede:<\/p>\n
Piyasada Redux, Recoil, Jotai gibi bir\u00e7ok durum y\u00f6netim k\u00fct\u00fcphanesi bulunmaktad\u0131r. Her birinin kendine \u00f6zg\u00fc avantajlar\u0131 ve dezavantajlar\u0131 vard\u0131r. Ancak son y\u0131llarda, \u00f6zellikle basitli\u011fi, hafifli\u011fi ve performans odakl\u0131 yap\u0131s\u0131yla \u00f6ne \u00e7\u0131kan Zustand, bir\u00e7ok geli\u015ftiricinin dikkatini \u00e7ekmeyi ba\u015farm\u0131\u015ft\u0131r. Peki, Zustand’\u0131 bu kadar \u00f6zel k\u0131lan nedir ve kurumsal projelerde nas\u0131l bir fark yarat\u0131r?<\/p>\n
Zustand, React uygulamalar\u0131 i\u00e7in tasarlanm\u0131\u015f, k\u00fc\u00e7\u00fck, h\u0131zl\u0131 ve \u00f6l\u00e7eklenebilir bir durum y\u00f6netim k\u00fct\u00fcphanesidir. Ad\u0131n\u0131 Almanca “durum” anlam\u0131na gelen kelimeden alan Zustand, React Hooks (kancalar) \u00fczerine in\u015fa edilmi\u015f minimalist bir API sunar. Geleneksel durum y\u00f6netim k\u00fct\u00fcphanelerinin aksine, Zustand’\u0131n temel felsefesi “basitlik” ve “az kodla \u00e7ok i\u015f yapma” \u00fczerine kuruludur. Bu sayede, geli\u015ftiricilerin karma\u015f\u0131k \u015fablon kodlarla u\u011fra\u015fmak yerine do\u011frudan i\u015f mant\u0131\u011f\u0131na odaklanmas\u0131na olanak tan\u0131r.<\/p>\n
Zustand’\u0131 di\u011fer pop\u00fcler durum y\u00f6netim k\u00fct\u00fcphanelerinden ay\u0131ran ba\u015fl\u0131ca \u00f6zellikler \u015funlard\u0131r:<\/p>\n
useStore<\/code> gibi basit bir hook ile ma\u011fazan\u0131zdaki duruma eri\u015febilir ve onu g\u00fcncelleyebilirsiniz.<\/li>\n- Performans Odakl\u0131:<\/strong> Zustand, durumu g\u00fcncellemeleri atomik bir \u015fekilde i\u015fleyerek ve sadece de\u011fi\u015fen duruma abone olan bile\u015fenleri yeniden render ederek y\u00fcksek performans sa\u011flar. Bu, \u00f6zellikle b\u00fcy\u00fck ve veri yo\u011fun uygulamalarda fark yarat\u0131r.<\/li>\n
- \u00d6l\u00e7eklenebilirlik:<\/strong> Basit bir API’ye sahip olmas\u0131na ra\u011fmen, Zustand kurumsal d\u00fczeyde uygulamalar\u0131 destekleyecek \u015fekilde tasarlanm\u0131\u015ft\u0131r. Middleware’ler (ara yaz\u0131l\u0131mlar) ve mod\u00fcler ma\u011faza yap\u0131land\u0131rmalar\u0131 sayesinde uygulaman\u0131z b\u00fcy\u00fcd\u00fck\u00e7e durum y\u00f6netiminizi kolayca geni\u015fletebilirsiniz.<\/li>\n
- Immutable (De\u011fi\u015fmez) Durum Y\u00f6netimi:<\/strong> Zustand, durumun do\u011frudan de\u011fi\u015ftirilmemesi, bunun yerine yeni bir durum nesnesi d\u00f6nd\u00fcr\u00fclmesi prensibini benimser. Bu, durum de\u011fi\u015fikliklerinin izlenmesini kolayla\u015ft\u0131r\u0131r ve beklenmedik yan etkileri (side effects) azalt\u0131r.<\/li>\n<\/ul>\n
\u00d6zetle, Zustand, React geli\u015ftiricilerine daha az kodla daha fazla esneklik ve performans sunan modern bir durum y\u00f6netim \u00e7\u00f6z\u00fcm\u00fc vaat ediyor. \u00d6zellikle karma\u015f\u0131k olmayan ancak \u00f6l\u00e7eklenebilirlik ve performans gerektiren kurumsal projelerde, h\u0131zl\u0131 prototipleme ve kolay bak\u0131m imkan\u0131 sunarak de\u011ferli bir ara\u00e7 haline geliyor.<\/p>\n
Zustand ile \u0130lk Ad\u0131mlar: Temel Bir Durum Ma\u011fazas\u0131 (Store) Nas\u0131l Olu\u015fturulur?<\/h2>\n
Zustand ile \u00e7al\u0131\u015fmaya ba\u015flamak olduk\u00e7a basittir. \u0130lk olarak, projenize Zustand’\u0131 eklemeniz gerekir. Ard\u0131ndan, uygulaman\u0131z\u0131n global durumunu y\u00f6netecek bir ma\u011faza (store) olu\u015fturabilirsiniz. Bu b\u00f6l\u00fcmde, basit bir saya\u00e7 uygulamas\u0131 \u00f6rne\u011fi \u00fczerinden Zustand’\u0131n temel kullan\u0131m\u0131n\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n
Kurulum<\/h3>\n
Projenize Zustand’\u0131 kurmak i\u00e7in a\u015fa\u011f\u0131daki komutlardan birini kullanabilirsiniz:<\/p>\n
\nnpm install zustand<\/code><\/pre>\n<\/div>\nveya<\/p>\n
\nyarn add zustand<\/code><\/pre>\n<\/div>\nBasit Bir Saya\u00e7 Ma\u011fazas\u0131 Olu\u015fturma<\/h3>\n
Bir Zustand ma\u011fazas\u0131, create<\/code> fonksiyonu kullan\u0131larak olu\u015fturulur. Bu fonksiyon, bir “set” fonksiyonu alan ve durum nesnesini d\u00f6nd\u00fcren bir geri arama (callback) fonksiyonu al\u0131r. “set” fonksiyonu, ma\u011fazan\u0131n durumunu g\u00fcncellemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n\u00d6ncelikle, projenizin k\u00f6k dizininde veya durum y\u00f6netim dosyalar\u0131n\u0131z\u0131 tuttu\u011funuz bir klas\u00f6rde (\u00f6rne\u011fin, src\/store\/useCounterStore.js<\/code>) yeni bir dosya olu\u015ftural\u0131m:<\/p>\n\n\/\/ src\/store\/useCounterStore.js\nimport { create } from 'zustand';\n\n\/\/ create fonksiyonu ile bir ma\u011faza olu\u015fturuyoruz.\n\/\/ Bu ma\u011faza, bir saya\u00e7 de\u011feri (count) ve bu de\u011feri artt\u0131rma\/azaltma aksiyonlar\u0131na sahip olacak.\nconst useCounterStore = create((set) => ({\n \/\/ Durum (state) tan\u0131mlamas\u0131\n count: 0,\n\n \/\/ Aksiyonlar (actions) tan\u0131mlamas\u0131\n \/\/ 'set' fonksiyonu, durumun bir sonraki halini belirlemek i\u00e7in kullan\u0131l\u0131r.\n \/\/ \u00d6nceki durumu (state) al\u0131p yeni bir durum nesnesi d\u00f6nd\u00fcr\u00fcr\u00fcz.\n increment: () => set((state) => ({ count: state.count + 1 })),\n decrement: () => set((state) => ({ count: state.count - 1 })),\n reset: () => set({ count: 0 }), \/\/ Durumu do\u011frudan bir nesne ile de g\u00fcncelleyebiliriz\n}));\n\nexport default useCounterStore;\n<\/code><\/pre>\n<\/div>\nYukar\u0131daki kodda, useCounterStore<\/code> ad\u0131nda bir hook olu\u015fturduk. Bu hook, count<\/code> ad\u0131nda bir duruma ve increment<\/code>, decrement<\/code>, reset<\/code> ad\u0131nda \u00fc\u00e7 aksiyona sahiptir. Aksiyonlar, set<\/code> fonksiyonunu kullanarak durumu g\u00fcnceller. set<\/code> fonksiyonu, \u00f6nceki durumu al\u0131p yeni bir durum nesnesi d\u00f6nd\u00fcrme prensibiyle \u00e7al\u0131\u015f\u0131r, bu da durumun de\u011fi\u015fmezli\u011fini (immutability) korumam\u0131za yard\u0131mc\u0131 olur.<\/p>\nBile\u015fenlerde Ma\u011fazay\u0131 Kullanma<\/h3>\n
\u015eimdi bu ma\u011fazay\u0131 React bile\u015fenlerimizde nas\u0131l kullanaca\u011f\u0131m\u0131za bakal\u0131m. useCounterStore<\/code> hook’unu herhangi bir React fonksiyonel bile\u015feninde \u00e7a\u011f\u0131rarak ma\u011fazan\u0131n durumuna ve aksiyonlar\u0131na eri\u015febiliriz.<\/p>\n\n\/\/ src\/components\/CounterComponent.jsx\nimport React from 'react';\nimport useCounterStore from '..\/store\/useCounterStore'; \/\/ Olu\u015fturdu\u011fumuz ma\u011fazay\u0131 i\u00e7e aktar\u0131yoruz\n\nfunction CounterComponent() {\n \/\/ useCounterStore hook'unu kullanarak ma\u011fazadaki durumu ve aksiyonlar\u0131 se\u00e7iyoruz.\n \/\/ Zustand'\u0131n en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, sadece ihtiyac\u0131n\u0131z olan durum par\u00e7alar\u0131n\u0131 se\u00e7ebilmenizdir.\n \/\/ Bu, yaln\u0131zca se\u00e7ilen durum de\u011fi\u015fti\u011finde bile\u015fenin yeniden render edilmesini sa\u011flar.\n const count = useCounterStore((state) => state.count);\n const increment = useCounterStore((state) => state.increment);\n const decrement = useCounterStore((state) => state.decrement);\n const reset = useCounterStore((state) => state.reset);\n\n \/\/ Alternatif olarak, t\u00fcm ma\u011faza nesnesini de alabilirsiniz, ancak performans i\u00e7in se\u00e7ici kullan\u0131m \u00f6nerilir:\n \/\/ const { count, increment, decrement, reset } = useCounterStore(); \n\n return (\n <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px', maxWidth: '300px', margin: '20px auto' }}>\n <h3>Zustand Saya\u00e7 Uygulamas\u0131<\/h3>\n <p>Mevcut Saya\u00e7 De\u011feri: <strong>{count}<\/strong><\/p>\n <button onClick={increment} style={{ margin: '5px', padding: '10px 15px', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>Artt\u0131r (+1)<\/button>\n <button onClick={decrement} style={{ margin: '5px', padding: '10px 15px', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>Azalt (-1)<\/button>\n <button onClick={reset} style={{ margin: '5px', padding: '10px 15px', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>S\u0131f\u0131rla<\/button>\n <\/div>\n );\n}\n\nexport default CounterComponent;\n<\/code><\/pre>\n<\/div>\nBu \u00f6rnekte, useCounterStore<\/code> hook’unu kullanarak count<\/code> de\u011ferine ve increment<\/code>, decrement<\/code>, reset<\/code> aksiyonlar\u0131na eri\u015fiyoruz. Ma\u011fazadaki count<\/code> de\u011feri de\u011fi\u015fti\u011finde, sadece bu de\u011feri kullanan CounterComponent<\/code> yeniden render edilecektir. Bu, Zustand’\u0131n ak\u0131ll\u0131 se\u00e7ici mekanizmas\u0131 sayesinde elde edilen \u00f6nemli bir performans avantaj\u0131d\u0131r.<\/p>\nBu basit ad\u0131mlarla, Zustand ile temel bir durum ma\u011fazas\u0131 olu\u015fturmay\u0131 ve bunu React bile\u015fenlerinizde kullanmay\u0131 \u00f6\u011frendiniz. Bu temel yap\u0131, kurumsal uygulamalar\u0131n\u0131zdaki daha karma\u015f\u0131k durumlar\u0131 y\u00f6netmek i\u00e7in bir ba\u015flang\u0131\u00e7 noktas\u0131 olacakt\u0131r.<\/p>\n
Kurumsal Uygulamalar \u0130\u00e7in Geli\u015fmi\u015f Zustand Kullan\u0131m Senaryolar\u0131<\/h2>\n
Zustand’\u0131n basit API’si, onu sadece temel durum y\u00f6netimi i\u00e7in de\u011fil, ayn\u0131 zamanda kurumsal d\u00fczeydeki karma\u015f\u0131k senaryolar i\u00e7in de g\u00fc\u00e7l\u00fc bir ara\u00e7 haline getirir. Bu b\u00f6l\u00fcmde, asenkron i\u015flemlerin y\u00f6netimi, middleware’ler (ara yaz\u0131l\u0131mlar) ile durum y\u00f6netimini zenginle\u015ftirme ve mod\u00fcler ma\u011faza yap\u0131lar\u0131 olu\u015fturma gibi ileri d\u00fczey konular\u0131 ele alaca\u011f\u0131z.<\/p>\n
Asenkron \u0130\u015flemler ve API \u00c7a\u011fr\u0131lar\u0131 Nas\u0131l Y\u00f6netilir?<\/h3>\n
Modern uygulamalar\u0131n \u00e7o\u011fu, sunucu taraf\u0131yla ileti\u015fim kurmak i\u00e7in asenkron (e\u015fzamans\u0131z) API \u00e7a\u011fr\u0131lar\u0131na ihtiya\u00e7 duyar. Zustand, bu t\u00fcr i\u015flemleri y\u00f6netmek i\u00e7in do\u011frudan async\/await<\/code> s\u00f6zdizimini kullanman\u0131za olanak tan\u0131r. Ma\u011fazan\u0131zdaki aksiyonlar i\u00e7inde asenkron fonksiyonlar tan\u0131mlayabilir ve API \u00e7a\u011fr\u0131lar\u0131n\u0131n farkl\u0131 a\u015famalar\u0131n\u0131 (y\u00fckleniyor, ba\u015far\u0131l\u0131, hata) durumunuza yans\u0131tabilirsiniz.<\/p>\n\u00d6rnek olarak, bir kullan\u0131c\u0131 listesini bir API’den \u00e7eken bir ma\u011faza olu\u015ftural\u0131m:<\/p>\n
\n\/\/ src\/store\/useUserStore.js\nimport { create } from 'zustand';\n\nconst useUserStore = create((set) => ({\n users: [],\n loading: false,\n error: null,\n\n fetchUsers: async () => {\n set({ loading: true, error: null }); \/\/ Y\u00fckleme ba\u015flad\u0131\u011f\u0131nda durumu g\u00fcncelle\n\n try {\n const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/users');\n if (!response.ok) {\n throw new Error(HTTP hata kodu: ${response.status}<\/code>);\n }\n const data = await response.json();\n set({ users: data, loading: false }); \/\/ Ba\u015far\u0131l\u0131 oldu\u011funda kullan\u0131c\u0131lar\u0131 ve y\u00fckleme durumunu g\u00fcncelle\n } catch (error) {\n set({ error: error.message, loading: false }); \/\/ Hata durumunda hatay\u0131 ve y\u00fckleme durumunu g\u00fcncelle\n }\n },\n}));\n\nexport default useUserStore;\n<\/code><\/pre>\n<\/div>\nBu ma\u011fazay\u0131 bir React bile\u015feninde kullanmak olduk\u00e7a basittir:<\/p>\n
\n\/\/ src\/components\/UserList.jsx\nimport React from 'react';\nimport useUserStore from '..\/store\/useUserStore';\n\nfunction UserList() {\n const { users, loading, error, fetchUsers } = useUserStore();\n\n if (loading) return <p>Kullan\u0131c\u0131lar y\u00fckleniyor...<\/p>;\n if (error) return <p style={{ color: 'red' }}>Hata: {error}<\/p>;\n\n return (\n <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px', maxWidth: '400px', margin: '20px auto' }}>\n <h3>Kullan\u0131c\u0131 Listesi<\/h3>\n <button onClick={fetchUsers} disabled={loading} style={{ margin: '5px', padding: '10px 15px', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>Kullan\u0131c\u0131lar\u0131 Getir<\/button>\n <ul>\n {users.map((user) => (\n <li key={user.id}>{user.name} ({user.email})<\/li>\n ))}\n <\/ul>\n <\/div>\n );\n}\n\nexport default UserList;\n<\/code><\/pre>\n<\/div>\nBu yap\u0131, kurumsal uygulamalarda s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan veri \u00e7ekme i\u015flemlerini temiz ve y\u00f6netilebilir bir \u015fekilde ele alman\u0131z\u0131 sa\u011flar.<\/p>\n
Middleware’ler ile Durum Y\u00f6netimine G\u00fc\u00e7 Katmak<\/h3>\n
Zustand, ma\u011faza davran\u0131\u015f\u0131n\u0131 geni\u015fletmek i\u00e7in middleware’ler kullanman\u0131za olanak tan\u0131r. En pop\u00fcler middleware’lerden ikisi persist<\/code> (kal\u0131c\u0131l\u0131k) ve devtools<\/code> (geli\u015ftirici ara\u00e7lar\u0131) middleware’leridir.<\/p>\nPersist Middleware ile Durumu Kal\u0131c\u0131 Hale Getirme<\/h4>\n
persist<\/code> middleware’i, ma\u011fazan\u0131zdaki durumu taray\u0131c\u0131n\u0131n localStorage<\/code> veya sessionStorage<\/code> gibi depolama alanlar\u0131nda kal\u0131c\u0131 hale getirmenizi sa\u011flar. Bu, kullan\u0131c\u0131 taray\u0131c\u0131y\u0131 kapatt\u0131\u011f\u0131nda veya sayfay\u0131 yeniledi\u011finde durumun kaybolmamas\u0131n\u0131 sa\u011flar.<\/p>\n\n\/\/ src\/store\/useAuthStore.js\nimport { create } from 'zustand';\nimport { persist, devtools } from 'zustand\/middleware';\n\nconst useAuthStore = create(\n devtools( \/\/ Geli\u015ftirici ara\u00e7lar\u0131 entegrasyonu i\u00e7in (opsiyonel)\n persist( \/\/ Durumu kal\u0131c\u0131 hale getirmek i\u00e7in\n (set) => ({\n authToken: null,\n userProfile: null,\n login: (token, profile) => set({ authToken: token, userProfile: profile }),\n logout: () => set({ authToken: null, userProfile: null }),\n }),\n {\n name: 'auth-storage', \/\/ localStorage'da kullan\u0131lacak anahtar ad\u0131\n getStorage: () => localStorage, \/\/ Hangi depolama alan\u0131n\u0131n kullan\u0131laca\u011f\u0131n\u0131 belirtiyoruz (varsay\u0131lan: localStorage)\n }\n )\n )\n);\n\nexport default useAuthStore;\n<\/code><\/pre>\n<\/div>\nBu ma\u011faza, kullan\u0131c\u0131n\u0131n kimlik do\u011frulama token’\u0131n\u0131 ve profil bilgilerini taray\u0131c\u0131n\u0131n yerel depolama alan\u0131nda saklayacakt\u0131r. Uygulama yeniden y\u00fcklendi\u011finde, durum otomatik olarak geri y\u00fcklenecektir.<\/p>\n
Devtools Middleware ile Geli\u015ftirici Ara\u00e7lar\u0131 Entegrasyonu<\/h4>\n
devtools<\/code> middleware’i, ma\u011fazan\u0131z\u0131 Redux DevTools uzant\u0131s\u0131 ile entegre etmenizi sa\u011flar. Bu, durum de\u011fi\u015fikliklerini izlemek, aksiyonlar\u0131 g\u00f6rmek ve zaman yolculu\u011fu hata ay\u0131klamas\u0131 yapmak i\u00e7in paha bi\u00e7ilmez bir ara\u00e7t\u0131r.<\/p>\nYukar\u0131daki useAuthStore<\/code> \u00f6rne\u011finde g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, devtools<\/code> middleware’i create<\/code> fonksiyonunun i\u00e7inde persist<\/code> middleware’ini saracak \u015fekilde kullan\u0131labilir.<\/p>\nBirden Fazla Ma\u011fazay\u0131 Y\u00f6netme ve Mod\u00fcler Yap\u0131<\/h3>\n
B\u00fcy\u00fck kurumsal uygulamalarda, t\u00fcm global durumu tek bir ma\u011fazada tutmak karma\u015f\u0131kl\u0131\u011fa yol a\u00e7abilir. Zustand, farkl\u0131 i\u015flevsel alanlar i\u00e7in birden fazla ma\u011faza olu\u015fturarak mod\u00fcler bir yap\u0131 kurman\u0131za olanak tan\u0131r. \u00d6rne\u011fin, bir e-ticaret uygulamas\u0131nda ayr\u0131 bir sepet ma\u011fazas\u0131, bir kullan\u0131c\u0131 ma\u011fazas\u0131 ve bir \u00fcr\u00fcn filtre ma\u011fazas\u0131 olabilir.<\/p>\n
Bu ma\u011fazalar\u0131n her biri ba\u011f\u0131ms\u0131z olarak \u00e7al\u0131\u015f\u0131r, ancak gerekti\u011finde birbirlerinin durumuna eri\u015febilir veya birbirlerinin aksiyonlar\u0131n\u0131 \u00e7a\u011f\u0131rabilirler. Bu, kodunuzu daha d\u00fczenli, bak\u0131m\u0131 kolay ve \u00f6l\u00e7eklenebilir hale getirir.<\/p>\n
Ma\u011fazalar aras\u0131 ileti\u015fim genellikle basit bir import\/export mekanizmas\u0131yla sa\u011flan\u0131r. \u00d6rne\u011fin, bir sepet ma\u011fazas\u0131, kullan\u0131c\u0131 ma\u011fazas\u0131ndan kullan\u0131c\u0131n\u0131n oturum durumunu kontrol etmek isteyebilir.<\/p>\n
\n\/\/ src\/store\/useCartStore.js\nimport { create } from 'zustand';\nimport useAuthStore from '.\/useAuthStore'; \/\/ Auth ma\u011fazas\u0131n\u0131 i\u00e7e aktar\u0131yoruz\n\nconst useCartStore = create((set, get) => ({\n items: [],\n addItem: (product) => {\n \/\/ Sepete \u00fcr\u00fcn eklemeden \u00f6nce kullan\u0131c\u0131n\u0131n oturum a\u00e7m\u0131\u015f olup olmad\u0131\u011f\u0131n\u0131 kontrol edebiliriz\n const { authToken } = useAuthStore.getState(); \/\/ Ba\u015fka bir ma\u011fazan\u0131n durumuna do\u011frudan eri\u015fim\n if (!authToken) {\n console.warn('\u00dcr\u00fcn eklemek i\u00e7in l\u00fctfen giri\u015f yap\u0131n.');\n \/\/ Kullan\u0131c\u0131ya bildirim g\u00f6sterebilir veya giri\u015f sayfas\u0131na y\u00f6nlendirebiliriz\n return;\n }\n set((state) => ({ items: [...state.items, product] }));\n },\n \/\/ ... di\u011fer sepet aksiyonlar\u0131\n}));\n\nexport default useCartStore;\n<\/code><\/pre>\n<\/div>\nBu yakla\u015f\u0131mla, her ma\u011faza kendi sorumluluk alan\u0131na odaklan\u0131rken, gerekti\u011finde di\u011fer ma\u011fazalarla etkile\u015fime ge\u00e7ebilir. Bu mod\u00fcler yap\u0131, kurumsal uygulamalar\u0131n karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 y\u00f6netmek i\u00e7in hayati \u00f6neme sahiptir.<\/p>\n
Ger\u00e7ek D\u00fcnya Senaryosu: E-ticaret Uygulamas\u0131 Sepet Y\u00f6netimi<\/h2>\n
\u015eimdiye kadar Zustand’\u0131n temel ve ileri d\u00fczey \u00f6zelliklerini inceledik. Bu b\u00f6l\u00fcmde, \u00f6\u011frendiklerimizi bir araya getirerek ger\u00e7ek d\u00fcnyadan bir senaryoyu ele alaca\u011f\u0131z: orta \u00f6l\u00e7ekli bir e-ticaret uygulamas\u0131nda sepet y\u00f6netimi. Bu vaka analizi, Zustand’\u0131n karma\u015f\u0131k i\u015f mant\u0131\u011f\u0131n\u0131 nas\u0131l basit ve etkili bir \u015fekilde y\u00f6netebilece\u011fini g\u00f6sterecektir.<\/p>\n
Vaka Analizi: E-ticaret Sepet Y\u00f6netimi Gereksinimleri<\/h3>\n
Bir e-ticaret uygulamas\u0131nda sepet y\u00f6netimi genellikle a\u015fa\u011f\u0131daki gereksinimleri i\u00e7erir:<\/p>\n
\n- \u00dcr\u00fcnleri sepete ekleme (mevcutsa miktar\u0131n\u0131 art\u0131rma).<\/li>\n
- Sepetten \u00fcr\u00fcn \u00e7\u0131karma.<\/li>\n
- Sepetteki bir \u00fcr\u00fcn\u00fcn miktar\u0131n\u0131 g\u00fcncelleme.<\/li>\n
- Sepeti tamamen bo\u015faltma.<\/li>\n
- Sepetteki toplam \u00fcr\u00fcn say\u0131s\u0131n\u0131 ve toplam fiyat\u0131 dinamik olarak hesaplama.<\/li>\n
- Kullan\u0131c\u0131 sayfay\u0131 yeniledi\u011finde veya taray\u0131c\u0131y\u0131 kapatt\u0131\u011f\u0131nda sepet i\u00e7eri\u011finin kaybolmamas\u0131 (kal\u0131c\u0131l\u0131k).<\/li>\n<\/ul>\n
Zustand ile Sepet Ma\u011fazas\u0131 Modellemesi<\/h3>\n
Bu gereksinimleri kar\u015f\u0131lamak i\u00e7in Zustand ile useCartStore<\/code> ad\u0131nda bir ma\u011faza olu\u015ftural\u0131m. Bu ma\u011faza, sepet i\u00e7eri\u011fini (items<\/code>), toplam \u00fcr\u00fcn say\u0131s\u0131n\u0131 ve toplam fiyat\u0131 y\u00f6netecek aksiyonlar\u0131 i\u00e7erecektir. Kal\u0131c\u0131l\u0131k i\u00e7in persist<\/code> middleware’ini de kullanaca\u011f\u0131z.<\/p>\n\n\/\/ src\/store\/useCartStore.js\nimport { create } from 'zustand';\nimport { persist, devtools } from 'zustand\/middleware';\n\nconst useCartStore = create(\n devtools(\n persist(\n (set, get) => ({\n items: [], \/\/ Sepetteki \u00fcr\u00fcnler\n \n \/\/ \u00dcr\u00fcn ekleme aksiyonu\n addItem: (product) => set((state) => {\n const existingItemIndex = state.items.findIndex(item => item.id === product.id);\n if (existingItemIndex > -1) {\n \/\/ \u00dcr\u00fcn zaten sepette varsa miktar\u0131n\u0131 art\u0131r\n const newItems = [...state.items];\n newItems[existingItemIndex] = {\n ...newItems[existingItemIndex],\n quantity: newItems[existingItemIndex].quantity + 1,\n };\n return { items: newItems };\n }\n \/\/ \u00dcr\u00fcn sepette yoksa yeni olarak ekle\n return { items: [...state.items, { ...product, quantity: 1 }] };\n }),\n\n \/\/ \u00dcr\u00fcn \u00e7\u0131karma aksiyonu\n removeItem: (productId) => set((state) => ({\n items: state.items.filter(item => item.id !== productId),\n })),\n\n \/\/ \u00dcr\u00fcn miktar\u0131n\u0131 g\u00fcncelleme aksiyonu\n updateQuantity: (productId, quantity) => set((state) => ({\n items: state.items.map(item =>\n item.id === productId ? { ...item, quantity: Math.max(1, quantity) } : item \/\/ Miktar en az 1 olmal\u0131\n ),\n })),\n\n \/\/ Sepeti bo\u015faltma aksiyonu\n clearCart: () => set({ items: [] }),\n\n \/\/ Toplam \u00fcr\u00fcn say\u0131s\u0131n\u0131 hesaplayan bir se\u00e7ici (selector)\n \/\/ get() fonksiyonunu kullanarak g\u00fcncel duruma eri\u015febiliriz\n getTotalItems: () => get().items.reduce((total, item) => total + item.quantity, 0),\n\n \/\/ Toplam fiyat\u0131 hesaplayan bir se\u00e7ici\n getTotalPrice: () => get().items.reduce((total, item) => total + item.price * item.quantity, 0),\n }),\n {\n name: 'e-commerce-cart', \/\/ localStorage'da kullan\u0131lacak anahtar\n getStorage: () => localStorage, \/\/ localStorage kullan\n }\n )\n )\n);\n\nexport default useCartStore;\n<\/code><\/pre>\n<\/div>\nSepet Bile\u015feninde Kullan\u0131m<\/h3>\n
\u015eimdi bu ma\u011fazay\u0131 kullanarak bir sepet bile\u015feni (CartComponent<\/code>) olu\u015ftural\u0131m. Bu bile\u015fen, sepet i\u00e7eri\u011fini g\u00f6sterecek, \u00fcr\u00fcn ekleme\/\u00e7\u0131karma\/miktar g\u00fcncelleme d\u00fc\u011fmelerine sahip olacak ve toplam bilgileri g\u00f6r\u00fcnt\u00fcleyecektir.<\/p>\n\n\/\/ src\/components\/CartComponent.jsx\nimport React from 'react';\nimport useCartStore from '..\/store\/useCartStore';\n\nfunction CartComponent() {\n const { items, addItem, removeItem, updateQuantity, clearCart } = useCartStore();\n \n \/\/ Se\u00e7icileri kullanarak sadece ihtiyac\u0131m\u0131z olan t\u00fcretilmi\u015f durumu al\u0131yoruz\n const totalItems = useCartStore((state) => state.getTotalItems());\n const totalPrice = useCartStore((state) => state.getTotalPrice());\n\n \/\/ \u00d6rnek bir \u00fcr\u00fcn nesnesi\n const sampleProduct1 = { id: 101, name: 'Ak\u0131ll\u0131 Telefon', price: 5000 };\n const sampleProduct2 = { id: 102, name: 'Kablosuz Kulakl\u0131k', price: 1500 };\n\n return (\n <div style={{ padding: '20px', border: '1px solid #007bff', borderRadius: '8px', maxWidth: '600px', margin: '20px auto', backgroundColor: '#e9f7ff' }}>\n <h3>Al\u0131\u015fveri\u015f Sepetiniz<\/h3>\n <div style={{ marginBottom: '15px' }}>\n <button onClick={() => addItem(sampleProduct1)} style={{ margin: '5px', padding: '10px 15px', border: 'none', borderRadius: '4px', cursor: 'pointer', backgroundColor: '#28a745', color: 'white' }}>Ak\u0131ll\u0131 Telefon Ekle<\/button>\n <button onClick={() => addItem(sampleProduct2)} style={{ margin: '5px', padding: '10px 15px', border: 'none', borderRadius: '4px', cursor: 'pointer', backgroundColor: '#28a745', color: 'white' }}>Kulakl\u0131k Ekle<\/button>\n <button onClick={clearCart} style={{ margin: '5px', padding: '10px 15px', border: 'none', borderRadius: '4px', cursor: 'pointer', backgroundColor: '#dc3545', color: 'white' }}>Sepeti Bo\u015falt<\/button>\n <\/div>\n\n {items.length === 0 ? (\n <p>Sepetinizde \u00fcr\u00fcn bulunmamaktad\u0131r.<\/p>\n ) : (\n <ul style={{ listStyleType: 'none', padding: 0 }}>\n {items.map((item) => (\n <li key={item.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 0', borderBottom: '1px dashed #b3d9ff' }}>\n <span>{item.name} ({item.quantity} adet) - <strong>{item.price * item.quantity} TL<\/strong><\/span>\n <div>\n <button onClick={() => updateQuantity(item.id, item.quantity + 1)} style={{ margin: '0 5px', padding: '5px 10px', border: 'none', borderRadius: '3px', cursor: 'pointer', backgroundColor: '#007bff', color: 'white' }}>+<\/button>\n <button onClick={() => updateQuantity(item.id, Math.max(1, item.quantity - 1))} style={{ margin: '0 5px', padding: '5px 10px', border: 'none', borderRadius: '3px', cursor: 'pointer', backgroundColor: '#007bff', color: 'white' }}>-<\/button>\n <button onClick={() => removeItem(item.id)} style={{ margin: '0 5px', padding: '5px 10px', border: 'none', borderRadius: '3px', cursor: 'pointer', backgroundColor: '#6c757d', color: 'white' }}>Kald\u0131r<\/button>\n <\/div>\n <\/li>\n ))}\n <\/ul>\n )}\n \n <div style={{ marginTop: '20px', paddingTop: '15px', borderTop: '2px solid #007bff', display: 'flex', justifyContent: 'space-between', fontWeight: 'bold' }}>\n <p>Toplam \u00dcr\u00fcn Say\u0131s\u0131: {totalItems}<\/p>\n <p>Toplam Tutar: {totalPrice} TL<\/p>\n <\/div>\n <\/div>\n );\n}\n\nexport default CartComponent;\n<\/code><\/pre>\n<\/div>\nBu \u00f6rnek, Zustand’\u0131n kurumsal bir e-ticaret uygulamas\u0131nda sepet y\u00f6netimi gibi karma\u015f\u0131k bir i\u015flevselli\u011fi ne kadar temiz ve okunabilir bir \u015fekilde ele alabildi\u011fini g\u00f6stermektedir. persist<\/code> middleware sayesinde, kullan\u0131c\u0131 sayfay\u0131 yenilese bile sepet i\u00e7eri\u011fi korunur. Se\u00e7iciler (getTotalItems<\/code>, getTotalPrice<\/code>) sayesinde ise sadece t\u00fcretilmi\u015f de\u011ferler de\u011fi\u015fti\u011finde bile\u015fen yeniden render edilir, bu da performans\u0131 art\u0131r\u0131r. Zustand’\u0131n bu esnekli\u011fi ve basitli\u011fi, geli\u015ftiricilerin i\u015f mant\u0131\u011f\u0131na odaklanmas\u0131n\u0131 sa\u011flayarak verimlili\u011fi art\u0131r\u0131r.<\/p>\nZustand ile Performans Optimizasyonlar\u0131 ve En \u0130yi Uygulamalar Nelerdir?<\/h2>\n
Zustand, do\u011fas\u0131 gere\u011fi performans odakl\u0131 bir k\u00fct\u00fcphane olsa da, kurumsal uygulamalarda en iyi performans\u0131 elde etmek i\u00e7in baz\u0131 en iyi uygulamalar\u0131 ve optimizasyon tekniklerini bilmek \u00f6nemlidir. Bu b\u00f6l\u00fcmde, Zustand ile \u00e7al\u0131\u015f\u0131rken uygulayabilece\u011finiz ba\u015fl\u0131ca performans ipu\u00e7lar\u0131na ve en iyi pratiklere de\u011finece\u011fiz.<\/p>\n
Se\u00e7ici Abone Olma (Selector Pattern)<\/h3>\n
Zustand’\u0131n en \u00f6nemli performans \u00f6zelliklerinden biri, bile\u015fenlerin ma\u011fazan\u0131n sadece belirli par\u00e7alar\u0131na abone olabilmesidir. E\u011fer bir bile\u015fen t\u00fcm ma\u011faza durumunu \u00e7ekip ard\u0131ndan i\u00e7indeki bir de\u011feri kullan\u0131rsa (const { count } = useCounterStore();<\/code> gibi), ma\u011fazadaki herhangi bir de\u011fi\u015fiklik bu bile\u015fenin yeniden render edilmesine neden olabilir. Ancak, sadece ihtiya\u00e7 duyulan durumu se\u00e7erek bu gereksiz yeniden render’lar\u0131 engelleyebiliriz.<\/p>\n\n\/\/ \u00d6nerilen: Sadece ihtiyac\u0131n\u0131z olan durumu se\u00e7in\nconst count = useCounterStore((state) => state.count);\n\n\/\/ \u00d6nerilmeyen: T\u00fcm store'u al\u0131p destructuring yapmak\n\/\/ const { count, increment } = useCounterStore(); \n\/\/ Bu durumda, 'increment' fonksiyonu de\u011fi\u015fmese bile 'count' de\u011fi\u015fti\u011finde bile\u015fen yeniden render edilir.\n\/\/ Ancak, Zustand'\u0131n kendisi fonksiyonlar\u0131 referans e\u015fitli\u011fi ile kontrol etti\u011fi i\u00e7in bu yakla\u015f\u0131m da genellikle sorun yaratmaz.\n\/\/ En g\u00fcvenli ve performansl\u0131 yol, her bir durumu veya aksiyonu ayr\u0131 ayr\u0131 se\u00e7mektir.\nconst increment = useCounterStore((state) => state.increment); \/\/ Aksiyonlar\u0131 da se\u00e7ici olarak almak\n<\/code><\/pre>\n<\/div>\nBu “se\u00e7ici” yakla\u015f\u0131m, Zustand’\u0131n React Context’e g\u00f6re daha iyi performans sunmas\u0131n\u0131n ana nedenlerinden biridir. Se\u00e7ici fonksiyonunuzun d\u00f6nd\u00fcrd\u00fc\u011f\u00fc de\u011fer de\u011fi\u015fmedi\u011fi s\u00fcrece bile\u015feniniz yeniden render edilmez.<\/p>\n
Durumun Normalle\u015ftirilmesi (State Normalization)<\/h3>\n
B\u00fcy\u00fck ve karma\u015f\u0131k nesneleri veya i\u00e7 i\u00e7e ge\u00e7mi\u015f dizileri do\u011frudan durum olarak saklamak, durum g\u00fcncellemelerini ve se\u00e7ici kullan\u0131m\u0131 zorla\u015ft\u0131rabilir. Durumun normalle\u015ftirilmesi, verileri d\u00fcz (flat) bir yap\u0131ya d\u00f6n\u00fc\u015ft\u00fcrerek ve ili\u015fkili verileri ID’leri \u00fczerinden referans g\u00f6stererek bu sorunu \u00e7\u00f6zer. Bu, genellikle bir veritaban\u0131 yap\u0131s\u0131na benzer \u015fekilde verilerin saklanmas\u0131 anlam\u0131na gelir (\u00f6rne\u011fin, t\u00fcm kullan\u0131c\u0131lar\u0131 bir nesnede ID’lerine g\u00f6re tutmak yerine, bir dizi i\u00e7inde tutmak).<\/p>\n
Normalle\u015ftirilmi\u015f durum, g\u00fcncellemeleri daha verimli hale getirir ve de\u011fi\u015fmezlik prensibini korumay\u0131 kolayla\u015ft\u0131r\u0131r. \u00d6rne\u011fin, bir \u00fcr\u00fcn listesini bir dizi olarak tutmak yerine, \u00fcr\u00fcnleri bir nesne i\u00e7inde ID’lerine g\u00f6re saklayabilir ve sepetinizde sadece bu ID’lere referans verebilirsiniz.<\/p>\n
Immutable (De\u011fi\u015fmez) Durum Y\u00f6netimi<\/h3>\n
Zustand, durumun do\u011frudan de\u011fi\u015ftirilmesi yerine, her g\u00fcncellemede yeni bir durum nesnesi d\u00f6nd\u00fcr\u00fclmesi prensibini te\u015fvik eder. Bu, React’\u0131n ve di\u011fer durum y\u00f6netim k\u00fct\u00fcphanelerinin performans optimizasyonlar\u0131n\u0131 tetiklemesi i\u00e7in kritik \u00f6neme sahiptir. Durum do\u011frudan de\u011fi\u015ftirilirse (mutasyon), React de\u011fi\u015fiklikleri alg\u0131layamayabilir ve bile\u015fenleri gereksiz yere yeniden render etmeyebilir veya tam tersi, beklenmedik yan etkilere yol a\u00e7abilir.<\/p>\n
\n\/\/ Do\u011fru: Yeni bir nesne d\u00f6nd\u00fcrerek durumu g\u00fcncelleme\nset((state) => ({ count: state.count + 1 }));\n\n\/\/ Yanl\u0131\u015f: Durumu do\u011frudan de\u011fi\u015ftirme (ka\u00e7\u0131n\u0131lmal\u0131d\u0131r)\n\/\/ set((state) => {\n\/\/ state.count++; \/\/ DO\u011eRUDAN DE\u011e\u0130\u015e\u0130KL\u0130K\n\/\/ return state;\n\/\/ });\n<\/code><\/pre>\n<\/div>\nKarma\u015f\u0131k nesnelerle \u00e7al\u0131\u015f\u0131rken, immer<\/code> gibi k\u00fct\u00fcphaneleri Zustand ile entegre ederek daha kolay bir \u015fekilde de\u011fi\u015fmez g\u00fcncellemeler yapabilirsiniz. Ancak Zustand’\u0131n kendi set<\/code> fonksiyonu, bu prensibi zaten do\u011fal olarak destekler.<\/p>\nMa\u011fazalar\u0131 Mod\u00fcler Tutmak<\/h3>\n
Uygulaman\u0131z b\u00fcy\u00fcd\u00fck\u00e7e, t\u00fcm durumu tek bir devasa ma\u011fazada toplamak yerine, i\u015flevsel alanlara g\u00f6re birden fazla k\u00fc\u00e7\u00fck ve odaklanm\u0131\u015f ma\u011faza olu\u015fturun. \u00d6rne\u011fin, kimlik do\u011frulama i\u00e7in bir ma\u011faza, sepet i\u00e7in ba\u015fka bir ma\u011faza, kullan\u0131c\u0131 ayarlar\u0131 i\u00e7in \u00fc\u00e7\u00fcnc\u00fc bir ma\u011faza. Bu mod\u00fcler yap\u0131:<\/p>\n
\n- Kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 art\u0131r\u0131r.<\/li>\n
- Farkl\u0131 ekiplerin farkl\u0131 ma\u011fazalar \u00fczerinde ba\u011f\u0131ms\u0131z \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/li>\n
- Her ma\u011fazan\u0131n daha k\u00fc\u00e7\u00fck ve y\u00f6netilebilir olmas\u0131n\u0131 sa\u011flar, bu da hata ay\u0131klamay\u0131 kolayla\u015ft\u0131r\u0131r.<\/li>\n<\/ul>\n
Bu en iyi uygulamalar\u0131 takip ederek, Zustand ile kurumsal React uygulamalar\u0131n\u0131zda hem g\u00fc\u00e7l\u00fc hem de y\u00fcksek performansl\u0131 bir durum y\u00f6netimi \u00e7\u00f6z\u00fcm\u00fc olu\u015fturabilirsiniz.<\/p>\n
Sonu\u00e7<\/h2>\n
Kurumsal React uygulamalar\u0131nda durum y\u00f6netimi, projenin \u00f6l\u00e7e\u011fi b\u00fcy\u00fcd\u00fck\u00e7e ka\u00e7\u0131n\u0131lmaz bir karma\u015f\u0131kl\u0131k kayna\u011f\u0131 haline gelebilir. Ancak bu makalede g\u00f6rd\u00fc\u011f\u00fcm\u00fcz gibi, Zustand gibi modern ve minimalist bir k\u00fct\u00fcphane, bu zorluklar\u0131n \u00fcstesinden gelmek i\u00e7in zarif ve etkili bir \u00e7\u00f6z\u00fcm sunar. Zustand, basit API’si, az \u015fablon kodu gerektirmesi, React Context’ten ba\u011f\u0131ms\u0131z \u00e7al\u0131\u015farak sa\u011flad\u0131\u011f\u0131 performans avantajlar\u0131 ve esnek middleware sistemi sayesinde geli\u015ftiricilerin i\u015f mant\u0131\u011f\u0131na odaklanmas\u0131n\u0131 sa\u011flar.<\/p>\n
Temel bir saya\u00e7 uygulamas\u0131ndan e-ticaret sepet y\u00f6netimi gibi ger\u00e7ek d\u00fcnya senaryolar\u0131na kadar, Zustand’\u0131n \u00e7e\u015fitli kullan\u0131m alanlar\u0131n\u0131 ve asenkron i\u015flemler, kal\u0131c\u0131l\u0131k gibi ileri d\u00fczey \u00f6zelliklerini ele ald\u0131k. Ayr\u0131ca, se\u00e7ici abone olma, durum normalle\u015ftirme ve de\u011fi\u015fmezlik prensibi gibi performans optimizasyon tekniklerinin \u00f6nemini vurgulad\u0131k. Zustand’\u0131n bu \u00f6zellikleri, onu hem ba\u015flang\u0131\u00e7 seviyesindeki geli\u015ftiriciler hem de deneyimli ekipler i\u00e7in cazip bir se\u00e7enek haline getirmektedir.<\/p>\n
Geli\u015ftirici deneyimini \u00f6n planda tutan ve performans beklentilerini kar\u015f\u0131layan Zustand, React ekosisteminde kendine sa\u011flam bir yer edinmi\u015ftir. Uygulaman\u0131z\u0131n karma\u015f\u0131kl\u0131\u011f\u0131 ne olursa olsun, Zustand size temiz, \u00f6l\u00e7eklenebilir ve bak\u0131m\u0131 kolay bir durum y\u00f6netim mimarisi olu\u015fturma g\u00fcc\u00fc verir. E\u011fer hen\u00fcz denemediyseniz, projenizde Zustand’\u0131 kullanarak geli\u015ftirme s\u00fcrecinizi ve uygulaman\u0131z\u0131n performans\u0131n\u0131 nas\u0131l iyile\u015ftirebilece\u011finizi ke\u015ffetmenizi \u015fiddetle tavsiye ederiz.<\/p>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n\n- Zustand Redux’a g\u00f6re ne gibi avantajlar sunar?<\/strong><\/dt>\n
- Zustand, Redux’a k\u0131yasla \u00e7ok daha az \u015fablon kod (boilerplate) gerektirir, daha basit bir API’ye sahiptir ve \u00f6\u011frenme e\u011frisi daha k\u0131sad\u0131r. Ayr\u0131ca, Redux’un aksine React Context’ten ba\u011f\u0131ms\u0131z \u00e7al\u0131\u015f\u0131r ve performans optimizasyonlar\u0131 sayesinde gereksiz yeniden render’lar\u0131 daha etkili bir \u015fekilde engeller. Bu da genellikle daha hafif ve h\u0131zl\u0131 uygulamalar anlam\u0131na gelir.<\/dd>\n
- Zustand’\u0131 her projede kullanmal\u0131 m\u0131y\u0131m?<\/strong><\/dt>\n
- K\u00fc\u00e7\u00fck \u00f6l\u00e7ekli projeler veya \u00e7ok az global duruma sahip uygulamalar i\u00e7in React’\u0131n kendi
useState<\/code> ve useContext<\/code> hook’lar\u0131 yeterli olabilir. Ancak uygulaman\u0131z orta veya b\u00fcy\u00fck \u00f6l\u00e7ekli ise, bir\u00e7ok bile\u015fenin ayn\u0131 duruma eri\u015fmesi gerekiyorsa veya durumunuz karma\u015f\u0131kla\u015f\u0131yorsa, Zustand karma\u015f\u0131kl\u0131\u011f\u0131 azalt\u0131r, veri ak\u0131\u015f\u0131n\u0131 d\u00fczenler ve performans\u0131 art\u0131rarak geli\u015ftirici deneyiminizi \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilir.<\/dd>\n- Zustand ile TypeScript kullan\u0131m\u0131 nas\u0131l olur?<\/strong><\/dt>\n
- Zustand, TypeScript ile tam uyumludur ve ma\u011fazalar\u0131n\u0131z\u0131 tip g\u00fcvenli bir \u015fekilde olu\u015fturman\u0131za olanak tan\u0131r.
create<\/code> fonksiyonuna generic tipler tan\u0131mlayarak durumunuzun ve aksiyonlar\u0131n\u0131z\u0131n tiplerini belirleyebilirsiniz. Bu, geli\u015ftirme s\u0131ras\u0131nda hatalar\u0131 yakalaman\u0131za yard\u0131mc\u0131 olur ve kodunuzun bak\u0131m\u0131 ile okunabilirli\u011fini art\u0131r\u0131r.<\/dd>\n- Zustand’da persist (kal\u0131c\u0131l\u0131k) \u00f6zelli\u011fini nas\u0131l kullan\u0131r\u0131m?<\/strong><\/dt>\n
- Durumunuzu kal\u0131c\u0131 hale getirmek i\u00e7in
zustand\/middleware<\/code> paketinden persist<\/code> middleware’ini i\u00e7e aktarman\u0131z ve create<\/code> fonksiyonunu onunla sarman\u0131z yeterlidir. persist<\/code> fonksiyonuna bir isim (localStorage anahtar\u0131 i\u00e7in) ve iste\u011fe ba\u011fl\u0131 olarak kullan\u0131lacak depolama mekanizmas\u0131n\u0131 (localStorage<\/code>, sessionStorage<\/code> vb.) belirten bir se\u00e7enek nesnesi ge\u00e7irebilirsiniz. Bu sayede, kullan\u0131c\u0131 taray\u0131c\u0131y\u0131 kapatt\u0131\u011f\u0131nda veya sayfay\u0131 yeniledi\u011finde durumunuz korunur.<\/dd>\n- Zustand’da birden fazla ma\u011faza aras\u0131nda ileti\u015fim nas\u0131l sa\u011flan\u0131r?<\/strong><\/dt>\n
- Zustand, ma\u011fazalar aras\u0131nda do\u011frudan import\/export mekanizmas\u0131yla ileti\u015fim kurman\u0131za olanak tan\u0131r. Bir ma\u011faza, di\u011fer bir ma\u011fazan\u0131n hook’unu i\u00e7e aktararak (\u00f6rne\u011fin,
import useAuthStore from '.\/useAuthStore';<\/code>) onun durumuna veya aksiyonlar\u0131na eri\u015febilir. \u00d6zellikle get()<\/code> fonksiyonunu kullanarak di\u011fer ma\u011fazalar\u0131n anl\u0131k durumunu alabilir veya aksiyonlar\u0131n\u0131 \u00e7a\u011f\u0131rabilirsiniz. Bu, mod\u00fcler ve ayr\u0131k ma\u011fazalar aras\u0131nda temiz bir ileti\u015fim yolu sa\u011flar.<\/dd>\n<\/dl>\n#React #Zustand #DurumY\u00f6netimi #EnterpriseReact #WebGeli\u015ftirme #JavaScript #Frontend<\/p>\n