React Redux Nedir ve Nasıl Kullanırsınız?

Redux, JavaScript uygulamalarının ön ucunda çalışan ve bir UI içindeki her bileşenin durumunu yöneten ücretsiz bir durum yönetimi kitaplığıdır. Redux kitaplığı, bir uygulamada verileri yöneten ve depolayan kod ile olayları ve bunların bir uygulamanın kullanıcı arabiriminin çeşitli bileşenleri üzerindeki etkilerini yöneten kod arasında bir ayrım yapılmasını kolaylaştırır.

Redux'un ana satış noktalarından biri esnek olmasıdır. Redux'u hemen hemen her JavaScript çerçevesi veya kitaplığı ile kullanabilirsiniz.

Redux ekibi, Redux, React-Redux ve Redux Toolkit olmak üzere üç kitaplık oluşturmuştur. Her üç kitaplık da size React geliştirme deneyiminizden en iyi şekilde yararlanmak için birlikte çalışır ve bu eğitim makalesinde bunları nasıl kullanacağınızı öğreneceksiniz.

React-Redux'un Önemi

Redux bağımsız bir durum yönetimi kitaplığı olmasına rağmen, onu herhangi bir ön uç çerçeve veya kitaplık ile kullanmak bir UI bağlama kitaplığı gerektirir. Bir kullanıcı arabirimi bağlama kitaplığı, bir ön uç çerçevesini Redux kitaplığına bağlayan bir dizi önceden tanımlanmış adım olan durum kapsayıcı (veya depo) etkileşim mantığını işler.

React-Redux, React uygulamaları için resmi Redux UI bağlama kitaplığıdır ve Redux ekibi tarafından korunur.

İlişkili: JavaScript ile İlk React Uygulamanızı Nasıl Oluşturursunuz?

Redux'u Proje Dizininize Kurmak

React uygulamanızda Redux kitaplığına erişmenin iki yolu vardır. Redux ekibi tarafından önerilen yaklaşım, yeni bir React projesi oluştururken aşağıdaki komutu kullanmaktır:

npx create-tepki-app benim uygulamam --template redux

Yukarıdaki komut, Redux Toolkit, React-Redux ve Redux deposunu otomatik olarak yapılandırır. Ancak, Redux'u mevcut bir React projesinde kullanmak istiyorsanız, aşağıdaki komutla Redux kitaplığını bir bağımlılık olarak kurabilirsiniz:

npm redux'u yükle

Ardından React-Redux bağlama kullanıcı arabirimi kitaplığı:

npm tepki-redux'u kurun

Ve Redux araç takımı:

npm @reduxjs/araç setini kurun

Redux Toolkit kitaplığı da önemlidir çünkü Redux mağaza yapılandırma sürecini hızlı ve kolay hale getirir.

Redux Mağazası Oluşturma

Redux kitaplığıyla çalışmaya başlamadan önce bir Redux durum kapsayıcısı (veya deposu) oluşturmanız gerekir. Global Redux uygulama durumunu depolayan nesne olduğu için bir Redux mağazası oluşturmak gereklidir.

React, çoğu ön uç çerçeve gibi, uygulamalarında en üst düzeyde bir dosya veya dosya grubu olan bir giriş noktasına sahiptir. bu index.html ve index.js dosyalar, bir React uygulamasının en üst düzeyinde bulunan iki dosyadır. App.js dosya ve uygulamadaki tüm bileşenler.

Böylece index.js file, bir Redux mağazası oluşturmak için ideal yerdir.

Redux Store ile index.js'yi güncelleme

React'i 'tepkiden' içe aktar
ReactDOM'u 'react-dom'dan içe aktar
Uygulamayı './App' içinden içe aktar
ReportWebVitals'i "./reportWebVitals" adresinden içe aktarın
{configureStore}'u "@reduxjs/toolkit"ten içe aktarın
{ Provider } öğesini 'react-redux'tan içe aktarın
kullanıcıyı './reducers/user' dosyasından içe aktar
const store = configurationStore({
 redüktör:{
 kullanıcı
 }
})
ReactDOM.render(




,
 Document.getElementById('root')
)
raporWebVitals();

Yukarıdaki kodda açılacak çok şey var, ancak başlamak için en iyi yer yapılandırmakStore işlev. Redux Toolkit kitaplığını yüklemenin faydalarını hemen görmeye başlayacaksınız. yapılandırmakStore işlevi, yalnızca üç satır kodla Redux deposunu oluşturur.

React uygulamanız Redux mağazasının var olduğunu bilemez. sağlayıcı bileşeni, React-Redux bağlama kitaplığından gelir. Sağlayıcı bileşeni, tek bir destek (mağaza) alır ve kendisini React uygulamasının etrafına sararak Redux mağazasını küresel olarak erişilebilir hale getirir.

Üçüncü ve son yeni ithalat index.js yukarıdaki dosya şudur kullanıcı azaltıcıRedux mağazanızın çalışması için hayati önem taşıyan .

Redüktör Neden Önemlidir?

Bir redüktörün amacı, bir UI bileşen durumu dayalı bir gerçekleştirilen eylem. Örneğin, bir çevrimiçi okul uygulaması oluşturuyorsanız, bir oturum açma bileşeni kullanarak erişim elde etmek için her kullanıcının uygulamada oturum açmasını zorunlu kılacaksınız. Bu uygulama için bir başka harika bileşen de, uygulamanızda oturum açtıklarında her kullanıcının adını veya e-posta adresini görüntüleyen aktif bir kullanıcı bileşenidir.

Yukarıdaki örnekte, aktif kullanıcı bileşeni, bir kullanıcı kendi hesabında oturum açma işlemini her gerçekleştirdiğinde değişecektir. Bu örnek, bu nedenle, bir redüktör için ideal bir durumdur. Bir redüktörün işlevini yalnızca Redux nedeniyle gerçekleştirebileceğini hatırlamak da önemlidir. herhangi bir bileşenin durumuna ve gerçekleştirmesi için ihtiyaç duyduğu eyleme erişmesini sağlayan depo görevler.

Kullanıcı Azaltıcısını Oluşturma

"@reduxjs/toolkit" içinden { createSlice } içe aktarın;
dışa aktarma const userSlice = createSlice({
 isim: "kullanıcı",
 initialState: { değer: {email: ""}},
 redüktörler: {
 giriş: (durum, eylem) => {
 durum.değer = eylem.yük
 },
 }
})
dışa aktarma const {login} = userSlice.actions
varsayılan userSlice.reducer'ı dışa aktar;

React'in içinde kaynakdizin bir oluşturabilirsiniz redüktör dizini, nerede saklayacağınız kullanıcı azaltıcı ve Redux mağazanıza eklemek istediğiniz diğer herhangi bir redüktör. bu kullanıcı.js yukarıdaki dosya oluşturmakDilim Redux Toolkit'ten işlev.

bu oluşturmakDilim işlev bir kabul eder isim, bir başlangıç ​​halive bir redüktör nesnesi birden fazla redüktör işlevini saklar. Bununla birlikte, yukarıdaki redüktörler nesnesi, adı verilen yalnızca bir redüktör işlevine sahiptir. giriş yapmak argüman olarak bir durum ve bir eylem alır ve yeni bir durum döndürür.

user.js dosyası, oturum açma azaltıcısını dışa aktarır. Oturum açma bileşeni onu içe aktarır ve kullanDispatch() kanca.

Oturum Açma Bileşenini Oluşturma

React'i 'react'ten içe aktarın;
Bağlantıyı '@mui/material/Link'ten içe aktar;
TextField'i '@mui/material/TextField' öğesinden içe aktarın;
Tipografiyi '@mui/material/Typography'den içe aktar;
'@mui/material' öğesinden { Düğme, Kutu } içe aktarın;
{ useDispatch } dosyasını 'react-redux'tan içe aktarın;
'../reducers/user' adresinden { login } dosyasını içe aktarın;
{ useState } öğesini 'tepkiden' içe aktarın;
function Oturum Açma() {
 const gönderme = useDispatch()
 const [e-posta, setEmail] = useState('')
 const handleSubmit = () => {
 gönderme (giriş({email: email}))
 }
dönüş (


sx={{
benim: 8,
ekran: 'esnek',
flexDirection: 'sütun',
alignItems: 'merkez',
}}>
 Kayıt olmak 
label="E-posta Adresi"
gereklidir
id="e-posta"
isim = "e-posta"
kenar boşluğu = "normal"
onChange={(e) => setEmail (e.target.value)}
/>
etiket="Şifre"
gereklidir
id="parola"
isim = "şifre"
type="şifre"
kenar boşluğu = "normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
şifreyi unut?

varyant = "içerir"
sx={{mt: 2}}
onClick={handleSubmit}
>
Kayıt olmak





);
}
varsayılan Oturum Açmayı dışa aktar;

Yukarıdaki oturum açma bileşeni şunları kullanır: MUI kitaplığı. Bir kullanıcının e-postasını ve şifresini gerektiren basit bir oturum açma formu oluşturur. Oturum açma düğmesine tıklamak, bir onClick işlevi, hangi çağıracak koluGönder işlev.

bu koluGönder işlevi kullanır kullanım Durumu() ve kullanımDispact() ile birlikte kancalar giriş azaltıcı aktif bir kullanıcının e-posta adresini Redux mağazasında kullanılabilir hale getirmek için. Redux mağazasından, React uygulamasındaki her bileşen artık aktif bir kullanıcının e-postasına erişebilir.

İlişkili: Hooks: Tepki Kahramanı Aşağıdaki aktif kullanıcı bileşeni, aktif bir kullanıcının e-posta adresini aşağıdakilerin yardımıyla alır: useSelector() kancası ve onu uygulama kullanıcı arayüzüne dönüştürür.

ActiveUser.js Dosyası

React'i "tepki" den içe aktar;
{ useSelector } öğesini "react-redux"tan içe aktarın;
function ActiveUsers() {
 const user = useSelector((durum) => state.user.value)
 dönüş (


Aktif Kullanıcılar

 {Kullanıcı e-postası} 




 );
}

Güncellenmiş App.js Dosyası

Bu kod parçasına bir göz atın:

React'i "tepki" den içe aktar; ActiveUsers'ı "./components/ActiveUsers" içinden içe aktarın; "./components/Signin" adresinden Signin'i içe aktarın;
işlev Uygulama() {
dönüş ( 
);
}
varsayılan Uygulamayı dışa aktar; 

bu App.js Yukarıdaki dosya, tarayıcınızda aşağıdaki çıktıyı oluşturarak React uygulamanızda hem aktif kullanıcıları hem de oturum açma bileşenlerini işler:

Bir kullanıcı uygulamada oturum açarsa, etkin kullanıcılar bileşeni hemen yeni bir etkin kullanıcı e-postası ile güncellenir.

Güncellenmiş Kullanıcı Arayüzü

Redux'u Ne Zaman Kullanmalısınız?

Redux, tahmin edilebilir ve güvenilir kod oluşturma konusunda mükemmel bir iş çıkardığı için en popüler devlet yönetimi kitaplıklarından biridir. Bir uygulamadaki birçok bileşen aynı uygulama durumunu kullanıyorsa, Redux ideal seçimdir.

Yukarıdaki okul örneğini kullanarak, oturum açma bileşeni, etkin kullanıcı bileşeni, sınıf katılımcısı bileşen ve hatta bir profil bileşeni, bir kullanıcının e-posta adresine (veya başka bir benzersiz tanımlayıcı). Bu yüzden Redux burada en iyi seçenektir.

Ancak, en fazla bir veya iki bileşen tarafından kullanılan bir durumunuz varsa, o zaman daha iyi bir seçenek React props olabilir.

ReactJS'de Props Nasıl Kullanılır

ReactJS'de propların nasıl kullanılacağına dair ipuçları arıyorsanız doğru yerdesiniz.

Sonrakini Oku

Yazar hakkında