Kurumsal Uygulamalar için En İyi React State Yönetim Araçları

Kurumsal düzeyde React uygulamalarının geliştiricileri, durum yönetiminin tutarlı bir son kullanıcı deneyimi için ne kadar önemli olduğunu bilir.

Ancak, durum yönetiminden etkilenen yalnızca kullanıcı değildir. React geliştiricileri durum yaratır ve sürdürür. Devlet yönetiminin basit, genişletilebilir ve atomik olmasını istiyorlar. React, kancaları tanıtarak bu yönde hareket etti.

Devletin birçok bileşen arasında paylaşılması gerektiğinde sorunlar ortaya çıkabilir. Mühendisler, ihtiyaçlarına uygun araçlar ve kitaplıklar bulmalı, aynı zamanda kurumsal düzeyde uygulamalar için gereken yüksek standartları karşılamalıdır.

Bu yazıda, en popüler kütüphaneleri analiz edip karşılaştıracağım ve kurumsal düzeyde bir uygulamada durum yönetimi için en uygun olanı seçeceğim.

Yerleşik React State Yönetim Yetenekleri

React, birden çok bileşen arasında veri sağlamak için mükemmel bir araca sahiptir. Context'in birincil amacı, pervane sondajından kaçınmaktır. Amacımız, kurumsal uygulamalarda karşılaşılması muhtemel çeşitli senaryolarda durumu yönetmek için kullanımı kolay bir araç elde etmektir: sık güncellemeler, yeniden tasarımlar, yeni özelliklerin tanıtımı vb.

Tüm bunlar Context ile teorik olarak yapılabilirken, kurulum, destek ve optimize etmek için zaman gerektiren özel bir çözüm gerektirecektir. Context'in tek avantajı, üçüncü taraf bir kitaplığa bağlı olmamasıdır, ancak bu, bu yaklaşımı sürdürme çabasından daha ağır basamaz.

Ayrıca, React ekibi üyesi Sebastian Markbage, yeni Context API'nin yüksek frekanslı güncellemeler için değil, tema güncellemeleri ve kimlik doğrulama yönetimi gibi düşük frekanslı güncellemeler için oluşturulup optimize edilmediğini belirtti.

Mevcut Kitaplıkları İnceleme

GitHub'da düzinelerce durum yönetimi aracı vardır (örn. Redux, MobX, Akita, Recoil ve Zustand). Ancak her birini dikkate almak sonsuz araştırma ve karşılaştırmalara yol açacaktır. Bu yüzden popülerliklerine , kullanımlarına ve bakımcılarına göre seçimimi üç ana rakiple sınırlandırdım.

Karşılaştırmayı açık hale getirmek için aşağıdaki kalite özelliklerini kullanacağım:

• kullanılabilirlik
• bakım
• Verim
• test edilebilirlik
• Ölçeklenebilirlik (daha büyük durumlarda aynı performansla çalışır)
• değiştirilebilirlik
• Tekrar Kullanılabilirlik
• Ekosistem (işlevselliği genişletmek için çeşitli yardımcı araçlara sahiptir)
• Topluluk (birçok kullanıcıya sahiptir ve soruları web'de yanıtlanır)
• Taşınabilirlik (React dışındaki kitaplıklar/çerçevelerle kullanılabilir)

redux

Redux, 2015 yılında oluşturulmuş bir durum konteyneridir. Çılgınca popüler hale geldi çünkü:

• Piyasaya sürüldüğünde ciddi bir alternatif yoktu.
• Devlet ve eylemler arasındaki ayrımı sağladı.
• react-redux büyüsü, basit durum bağlantısını etkinleştirdi.
• Kütüphanenin ortak yaratıcısı, beğenilen Facebook geliştiricisi ve React çekirdek ekip üyesi Dan Abramov'dur.

Verilerinizin yaşadığı küresel bir mağazanız var. Mağazayı güncellemeniz gerektiğinde , redüktöre giden bir eylem gönderirsiniz. Eylem türüne bağlı olarak, redüktör durumu değişmez bir şekilde günceller.

Redux'u React ile kullanmak için, react-redux aracılığıyla bileşenleri mağaza güncellemelerine abone olmanız gerekir.

Redux API Örneği

Redux'u diğer araçlardan ayıran kod tabanındaki temel parçalar dilimlerdir. Eylemlerin ve redüktörlerin tüm mantığını içerirler.

KodSandbox

 // slices/counter.js import { createSlice } from "@reduxjs/toolkit"; export const slice = createSlice({ name: "counter", initialState: { value: 0 }, reducers: { increment: (state) => { state.value += 1; }, decrement: (state) => { state.value -= 1; } } }); export const actions = slice.actions; export const reducer = slice.reducer; // store.js import { configureStore } from "@reduxjs/toolkit"; import { reducer as counterReducer } from "./slices/counter"; export default configureStore({ reducer: { counter: counterReducer } }); // index.js import React from 'react' import ReactDOM from 'react-dom' import { Provider } from 'react-redux' import App from './App' import store from './store' ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ) // App.js import React from "react"; import { useSelector, useDispatch } from "react-redux"; import { actions } from "./slices/counter"; const App = () => { const count = useSelector((state) => state.counter.value); const dispatch = useDispatch(); return ( <div> <div> <button onClick={() => dispatch(actions.increment())}>Increment</button> <span>{count}</span> <button onClick={() => dispatch(actions.decrement())}>Decrement</button> </div> </div> ); }; export default App;

Kalite Özellikleri

• Kullanılabilirlik Redux, resmi araç seti paketinin tanıtımıyla çok basit hale geldi. Bir dilim (ilk durum, indirgeyiciler ve eylemlerin bir kombinasyonu) oluşturursunuz, onu mağazaya iletirsiniz ve ona kancalar aracılığıyla bir bileşende erişirsiniz.
• Bakım . Redux basittir. Bir şeyin nasıl geliştirileceğini veya onarılacağını anlamak için derin bilgi gerektirmez.
• Performans . Redux ile birincil performans etkileyicisi yazılım mühendisidir. Redux, fazla mantığı olmayan basit bir araçtır. Durum güncellemelerinin yavaş olduğunu görürseniz, daha hızlı hale getirmek için resmi yönergeleri takip edebilirsiniz.
• Test edilebilirlik . Redux, saf işlevlerden (eylemler ve redüktörler) oluşur ve bu da onu birim testi için harika kılar. Ayrıca mağaza, eylemler ve indirgeyicilerin birlikte çalıştığı entegrasyon testleri yazmak için mekanizma sağlar.
• ölçeklenebilirlik Varsayılan olarak, Redux'un tek bir küresel durumu vardır ve bu da ölçeklendirmeyi zorlaştırır. Ancak, modüler redüktörlerin ve ara katman yazılımının oluşturulmasını sağlayan bir redux-dinamik modüller kitaplığı vardır.
• değiştirilebilirlik Redux'u özelleştirmek, ara katman yazılımını desteklediği için zahmetsiz bir iştir.
• yeniden kullanılabilirlik Redux, çerçeveden bağımsızdır, bu nedenle yeniden kullanılabilirlik konusunda çok iyidir.
• Ekosistem . Redux, faydalı eklentiler, kitaplıklar ve araçlardan oluşan dev bir ekosistem sunar.
• topluluk . Karşılaştırmamızdaki en eski devlet yönetimi kütüphanesi olan Redux, önemli bir bilgi tabanına sahip büyük bir topluluğu bir araya getirdi. Stack Overflow'ta redux etiketli ~30.000 (~19.000 yanıtlanmış) soru var.
• Nabız . Redux düzenli olarak güncellenir ve bakımı yapılır.

MobX

MobX, GitHub'da 23.000 yıldıza sahip nispeten eski bir kütüphanedir. Onu Redux'tan ayıran şey, OOP paradigmasını takip etmesi ve gözlemlenebilirleri kullanmasıdır. MobX, Michel Weststrate tarafından oluşturuldu ve şu anda Boston merkezli Mendix'in yardımıyla bir grup açık kaynak meraklısı tarafından sürdürülüyor.

MobX'te, gözlemlenebilir mağazanız olan yapıcı içinde makeObservable çağrısıyla bir JavaScript sınıfı oluşturursunuz (uygun yükleyiciye sahipseniz @observable dekoratör kullanabilirsiniz). Ardından, sınıfın özelliklerini (durum) ve yöntemlerini ( eylemler ve hesaplanan değerler ) bildirirsiniz. Bileşenler, duruma, hesaplanan değerlere ve eylemlere erişmek için bu gözlemlenebilir depoya abone olur.

MobX'in bir diğer önemli özelliği de değişkenliktir. Yan etkilerden kaçınmak istemeniz durumunda durumu sessizce güncellemenizi sağlar.

MobX API Örneği

MobX'in benzersiz bir özelliği, kaputun altına gizlenmiş tüm sihirle neredeyse saf ES6 sınıfları oluşturmanızdır. Konsantrasyonu mantık üzerinde tutmak için daha az kitaplığa özgü kod gerektirir.

KodSandbox

 // stores/counter.js import { makeAutoObservable } from "mobx"; class CounterStore { value = 0; constructor() { makeAutoObservable(this); } increment() { this.value += 1; } decrement() { this.value -= 1; } } export default CounterStore; // index.js import React from "react"; import ReactDOM from "react-dom"; import { Provider } from "mobx-react"; import App from "./App"; import CounterStore from "./stores/counter"; ReactDOM.render( <Provider counter={new CounterStore()}> <App /> </Provider>, document.getElementById("root") ); // App.js import React from "react"; import { inject, observer } from "mobx-react"; const App = inject((stores) => ({ counter: stores.counter }))( observer(({ counter }) => { return ( <div> <div> <button onClick={() => counter.increment()}>Increment</button> <span>{counter.value}</span> <button onClick={() => counter.decrement()}>Decrement</button> </div> </div> ); }) ); export default App;

Kalite Özellikleri

• Kullanılabilirlik Gözlenebilir bir mağaza, durum yönetimi için tek giriş noktasıdır. MobX'in kullanımını basitleştirir çünkü değiştirebileceğiniz tek yer sizdedir.
• Bakım . Bu önemli bir dezavantaj. RxJS API bilgisi olmadan istediğiniz sonucu elde edemezsiniz. MobX'i düşük nitelikli bir ekipte kullanmak durum tutarsızlığı sorunlarına yol açabilir.
• Performans . MobX, bağımsız mağazalardan oluşur ve yalnızca ihtiyacınız olanlara abone olmanızı sağlar. Çok etkili.
• Test edilebilirlik . Gözlenebilir depolar, içinde gizlenmiş reaktif işlevselliğe sahip düz JavaScript nesneleridir. Test etme, diğer JavaScript sınıflarıyla aynıdır.
• ölçeklenebilirlik Gözlemlenebilir mağazalar mantıksal olarak bölünür; MobX'i ölçeklendirmede zorluk yoktur.
• değiştirilebilirlik MobX, değiştirilmiş davranışlarla özel gözlemlenebilirler oluşturmaya izin verir. Ayrıca tepkime denen bir kavram var. Tepkiler modeli otomatik yan etkiler. Bu şeyler MobX'i çok özelleştirilebilir hale getirir.
• yeniden kullanılabilirlik MobX, çerçevelerden bağımsızdır, bu nedenle yeniden kullanılabilirlik konusunda çok iyidir.
• Ekosistem . MobX için yüzlerce uzantı mevcuttur.
• topluluk . MobX'in çok sayıda sadık hayranı var. Stack Overflow'ta mobx etiketli ~1600 (~1.000 cevaplanmış) soru var.
• Nabız . MobX düzenli olarak güncellenir ve bakımı yapılır.

geri tepme

Recoil, göreceli olarak yeni gelen, React ekibinin en son buluşudur. Bunun arkasındaki temel fikir, paylaşılan durum ve türetilmiş veriler gibi eksik React özelliklerinin basit bir uygulamasıdır.

Kurumsal düzeydeki projeler için deneysel bir kitaplığın neden gözden geçirildiğini merak ediyor olabilirsiniz. Öncelikle Recoil şu sıralar React topluluğunda en çok tartışılan konulardan biri. İkincisi, Recoil Facebook tarafından destekleniyor ve bazı uygulamalarında zaten kullanılıyor, bu da bir noktada kararlı bir sürüm olacağı anlamına geliyor. Son olarak, React'te durum paylaşımı için tamamen yeni bir yaklaşım ve eminim ki Recoil kullanımdan kaldırılsa bile aynı yolu izleyen başka bir araç olacaktır.

Geri tepme, iki terim üzerine kuruludur: atom ve seçici . Bir atom, paylaşılan durumlu bir parçadır. Bir bileşen, değerini almak/ayarlamak için bir atoma abone olabilir.

Görselde gördüğünüz gibi sadece abone olunan bileşenler değer değiştiğinde yeniden render ediliyor. Recoil'i çok performanslı hale getirir.

Recoil'in kutudan çıkardığı bir başka harika şey de seçicidir. Seçici, bir atomdan veya başka bir seçiciden toplanan bir değerdir. Tüketiciler için atom ve seçici arasında bir fark yoktur, sadece reaktif bir parçaya abone olmaları ve kullanmaları yeterlidir.

Bir atom/selektör değiştirildiğinde, onu kullanan seçiciler (yani ona abone olurlar) yeniden değerlendirilir.

Geri Tepme API Örneği

Recoil'in kodu rakiplerinden çok daha farklı. React kancalarına dayanır ve bu durumu değiştirmekten çok durum yapısına odaklanır.

KodSandbox

 // atoms/counter.js import { atom } from "recoil"; const counterAtom = atom({ key: "counter", default: 0 }); export default counterAtom; // index.js import React from "react"; import ReactDOM from "react-dom"; import { RecoilRoot } from "recoil"; import App from "./App"; ReactDOM.render( <RecoilRoot> <App /> </RecoilRoot>, document.getElementById("root") ); // App.js import React from "react"; import { useRecoilState } from "recoil"; import counterAtom from "./atoms/counter"; const App = () => { const [count, setCount] = useRecoilState(counterAtom); return ( <div> <div> <button onClick={() => setCount(count + 1)}>Increment</button> <span>{count}</span> <button onClick={() => setCount(count - 1)}>Decrement</button> </div> </div> ); }; export default App;

Kalite Özellikleri

• Kullanılabilirlik Recoil, useState gibi çalıştığı için kullanımı en kolay araçlardan biridir.
• Bakım . Geri Tepme'de yapmanız gereken tek şey, bileşenlerin içindeki seçicileri ve kancaları korumaktır - daha fazla değer, daha az standart.
• Performans . Recoil, React'in dışında bir durum ağacı oluşturur. Durum ağacı, tüm ağacın değişikliklerini değil, ihtiyacınız olan şeyleri almanızı ve dinlemenizi sağlar. Kaputun altında da iyi optimize edilmiş.
• Test edilebilirlik . Geri tepme, atomlarını ve seçicilerini test etmek için bir mekanizma sağlar.
• ölçeklenebilirlik Birden fazla bağımsız parçaya ayrılan bir durum, onu ölçeklenebilirlik konusunda iyi bir oyuncu yapar.
• değiştirilebilirlik Geri tepme yalnızca değerlerin ve bunların toplamlarının saklanmasından sorumludur. Veri akışı olmadığı için kolayca özelleştirilebilir.
• yeniden kullanılabilirlik Geri tepme, React'e dayanır. Başka yerde tekrar kullanılamaz.
• Ekosistem . Şu anda Recoil için bir ekosistem yok.
• topluluk . Geri tepme, büyük bir topluluğa sahip olmak için çok taze. Stack Overflow'ta recoiljs etiketli ~70 soru var.
• Nabız . Geri tepme nadiren güncellenir (en son iki güncellemesi arasında altı ay geçmiştir). Ayrıca GitHub'da birçok açık sorunu var.

Doğru React State Yönetim Aracını Seçme

Kurumsal düzeyde uygulamalar söz konusu olduğunda bu React küresel durum yönetimi kitaplıkları nasıl birikiyor?

Geri tepme genç ve taze, ancak şu anda topluluğu veya ekosistemi yok. Facebook üzerinde çalışıyor ve API umut verici görünse de, büyük bir React uygulaması zayıf topluluk desteğine sahip bir kütüphaneye güvenemez. Ayrıca deneysel olması onu daha da güvensiz hale getiriyor. Bugünün React kurumsal uygulamaları için kesinlikle iyi bir seçenek değil, ancak buna göz kulak olmaya değer.

MobX ve Redux bu sorunların hiçbirini paylaşmıyor ve piyasadaki çoğu büyük oyuncu bunları kullanıyor. Onları birbirinden farklı kılan şey öğrenme eğrisidir. MobX, temel bir reaktif programlama anlayışı gerektirir. Projeye dahil olan mühendisler yeterince yetenekli değilse, uygulama kod tutarsızlıkları, performans sorunları ve artan geliştirme süresi ile sonuçlanabilir. MobX kabul edilebilir ve ekibiniz reaktivitenin farkındaysa ihtiyaçlarınızı karşılayacaktır.

Redux'un da, çoğunlukla ölçeklenebilirlik ve performansla ilgili bazı sorunları var. Ancak MobX'in aksine, bu sorunlara kanıtlanmış çözümler var.

Her avantajı ve dezavantajı göz önünde bulundurarak ve kişisel deneyimimi göz önünde bulundurarak, React kurumsal düzeydeki uygulamalar için en iyi seçenek olarak Redux'u öneriyorum.