Durum yönetimi, modern web uygulamalarının kalbinde yer alır ve kullanıcıların verilerini yönetmede ve etkileşimlerini kaydetmede hayati bir rol oynar. Bir e-ticaret platformunda bir alışveriş sepetini doldurmak veya kimlik doğrulamasından sonra oturum açmış bir kullanıcı oturumunu sürdürmek olsun, bu eylemler verimli durum yönetimi aracılığıyla mümkün olur.

Temel olarak, durum yöneticileri, uygulamaların istenen sonuçları elde etmek için verilere erişmesine ve bunları işlemesine izin verir. Next.js, birden fazla durum yönetimi çözümü için destek sağlar. Ancak bu kılavuzda, durum yönetimi için Redux Toolkit'i kullanmaya odaklanacağız.

Next.js uygulamalarında, durum yönetimi genellikle iki tür durum içerir: genel durum ve bileşen durumu. Genel durum, bir kullanıcının kimlik doğrulama durumu gibi uygulamadaki tüm bileşenler tarafından paylaşılan bilgileri içerirken bileşen durumu, tek tek bileşenlere özgü verileri depolar.

Hem genel hem de bileşen durumları, uygulamanın genel durumunu yönetmede hayati roller oynayarak verimli veri işlemeyi kolaylaştırır.

Redux, dünya çapında bir durum yönetimi çözümü olarak geniş çapta benimsenmiştir. çeşitli JavaScript çerçeveleri. Ancak, özellikle küçük projeler için karmaşıklıklar getirebilir.

Yaygın bir dezavantaj, eylem türlerini, eylem oluşturucuları ve azaltıcıları tanımlamak için tekrarlayan basmakalıp kod yazma ihtiyacıdır. Bu, artan kod fazlalığına yol açabilir.

Bu zorlukların üstesinden gelmek için, Redux Araç Seti (RTK) imdada yetişir. Esas olarak, aşağıdakilerle çalışırken geliştirme deneyimini kolaylaştırmayı amaçlar: Redux durum yönetimi kitaplığı. Yaygın Redux görevlerini basitleştiren ve aşırı ortak kod ihtiyacını ortadan kaldıran bir dizi araç ve yardımcı program sağlar.

Şimdi, Next.js uygulamalarında durumu yönetmek için Redux Toolkit kullanımına geçelim. Başlamak için bir Next.js projesi oluşturun ve aşağıdaki adımları izleyerek gerekli bağımlılıkları kurun.

1. Terminalinizde aşağıdaki komutu çalıştırarak yerel olarak yeni bir Next.js projesi oluşturun:

   npx create-next-app@latest next-redux-toolkit

2. Projeyi oluşturduktan sonra, şunu çalıştırarak proje dizinine gidin:

   cd next-redux-toolkit

3. Son olarak, kullanarak projenize gerekli bağımlılıkları kurun. npm, Düğüm paket yöneticisi.

   npm install @reduxjs/toolkit tepki-redux

Temel bir Next.js projesi kurduktan sonra, artık durum yönetimi için Redux Toolkit kullanan bir demo Next.js uygulaması oluşturmaya hazırsınız.

Bu projenin kodunu burada bulabilirsiniz. GitHub deposu.

Redux Store'u yapılandırın

Redux deposu, uygulamanın tüm durumunu tutan merkezi bir kapsayıcıdır. Uygulama verilerinin tek kaynağı olarak işlev görür ve her bileşene durum sağlar. Mağaza, eylemler ve azaltıcılar aracılığıyla durumu yönetmekten ve güncellemekten sorumludur; bu da uygulama boyunca durum yönetimini kolaylaştırır.

Bir Redux mağazası oluşturmak için yeni bir yeniden düzenleme Next.js projenizin kök dizinindeki klasör. Bu klasörün içinde yeni bir tane oluşturun. mağaza.js dosyasını açın ve aşağıdaki kodu ekleyin:

içe aktarmak {configureStore} itibaren"@reduxjs/araç takımı";
içe aktarmak profil Redüktör itibaren'./reducers/profileSlice';
ihracatvarsayılan yapılandırma deposu({
 redüktör:{
 profil: profileReducer
 }
})

Yukarıdaki kod kullanır yapılandırma deposu Redux mağazasını oluşturmak ve yapılandırmak için işlev. Mağaza yapılandırması, redüktör nesne.

İndirgeyiciler, bu durumda, uygulamanın durumunun belirli eylemlere veya belirtilen olaylara yanıt olarak nasıl değişmesi gerektiğini belirtir. Bu örnekte, profil redüktör, profil durumuyla ilgili eylemleri yönetmekten sorumludur.

Kod, Redux mağazasını kurarak Redux Toolkit kullanarak uygulamanın durumunu yönetmek için çekirdek yapıyı oluşturur.

Durum Dilimlerini Tanımla

Redux durum dilimleri, yapılandırılmış redux deposundaki belirli veri öğelerinin durumunu yönetme mantığını kapsayan bileşenlerdir. Bu dilimler kullanılarak oluşturulur dilim oluştur Dilim için indirgeyiciyi, eylem oluşturucuları ve eylem türlerini otomatik olarak oluşturan işlev.

İçinde yeniden düzenleme dizini, yeni bir klasör oluşturun ve adlandırın redüktörler. Bu klasörün içinde, oluştur profileSlice.js dosyasını açın ve aşağıdaki kodu ekleyin.

içe aktarmak {Slice oluştur} itibaren"@reduxjs/araç takımı";
sabit profileSlice = oluşturSlice({
 isim: 'profil',
 başlangıç ​​hali: {
 isim: 'hiçbiri'
 },
 redüktörler: {
 SET_NAME: (durum, eylem) => {
 state.name = action.payload
 }
}})
ihracatsabit {SET_NAME} = profileSlice.actions;
ihracatvarsayılan profileSlice.reducer;

Sağlanan kodda, dilim oluştur işlevi, kullanıcı profili durumu için bir durum dilimi oluşturur. bu profil Dilim nesne, dilimin adını ve başlangıç ​​halidurum özellikleri için varsayılan değerleri içeren.

Ek olarak, dilim nesnesi ayrıca bir redüktörler bu dilim için eylem işleyicilerini tanımlayan özellik. Bu durumda, adlı tek bir indirgeyici işlev SET_NAME. Esasen, bu işlevi çağırdığınızda, sağlanan verilerle durumun ad özelliğini güncelleyecektir.

bu dilim oluştur işlevi, tanımlanan azaltıcılara göre otomatik olarak eylem oluşturucuları ve eylem türlerini oluşturur. ihraç edilen SET_NAME eylem yaratıcısı ve profileSlice.reducer profil dilimi için oluşturulan eylem oluşturucuyu ve azaltıcı işlevi temsil eder.

Bu durum dilimini oluşturarak, uygulama içindeki bileşenler SET_NAME eylem ve durumdaki profil adını güncellemek için istenen yükü iletin.

RTK'nın Durum Yönetimi İşlevini Test Etmek İçin Bir Bileşen Oluşturun

Aç index.js dosya sayfalar dizini, Next.js ortak kodunu silin ve aşağıdaki kodu ekleyin.

içe aktarmak stiller itibaren'@/styles/Home.module.css'
içe aktarmak {useRef} itibaren'tepki'
içe aktarmak {useSelector, useDispatch} itibaren"tepki redux"
içe aktarmak {SET_NAME} itibaren'../../redux/reducers/profileSlice'
işlevEkran adı(){
sabit {isim} = useSelector((durum) => durum.profil)
geri dönmek (

 Ben {isim} !!</h1> 
 ) }
ihracatvarsayılanişlevEv() {
sabit girdiAdı = useRef()
sabit gönderim = useDispatch()
işlevgönderAdı() {
konsol.log (inputName.current.value)
 gönderme (SET_NAME(inputName.current.value))
 }
geri dönmek (
 <>

'isim giriniz' ref={inputName} />
adı girin</button>

 </main>
 </>
 )}

Yukarıdaki kod, kullanıcının bir ad girmesine ve sağlanan adı tarayıcının sayfasında görüntülemesine izin veren bir Next.js bileşeni oluşturur ve işler. Redux Toolkit'i kullanarak uygulamanın durumunu etkili bir şekilde yönetin.

bu Ekran adı bileşeni kullanır seçiciyi kullan erişmek için kanca isim özelliğini Redux deposundaki profil durumundan alır ve sayfada işler.

Bir kullanıcı, bir ad girmek için İsim giriniz düğme. Bu çağrıştırır gönderAdı gönderen işlev, SET_NAME yük olarak giriş değeri ile eylem. Bu eylem, profil durumundaki name özelliğini günceller.

_app.js Dosyasını Güncelleyin

Son olarak, Redux Toolkit'i tüm Next.js uygulamasında kullanılacak şekilde yapılandırmak için uygulamayı Redux sağlayıcısı—bu, Redux deposunun ve kullanılabilir durumların sunucudaki tüm bileşenler tarafından erişilebilir olmasını sağlar. başvuru.

Aç _app.js dosyasını açın ve aşağıdaki gibi güncelleyin:

içe aktarmak {Sağlayıcı} itibaren"tepki redux"
içe aktarmak mağaza itibaren'../../redux/mağaza'
ihracatvarsayılanişlevUygulama({ Bileşen, pageProps }) {
geri dönmek (


 </Sağlayıcı> )
}

Şimdi devam edin ve yaptığınız değişiklikleri yansıtmak için geliştirme sunucusunu başlatın ve şuraya gidin: http://localhost: 3000 Uygulamayı test etmek için tarayıcınızda.

npm geliştiriciyi çalıştır

Sayfa Yeniden Yüklemede Veri Yeniden Hidrasyon İşlemi

Sayfa yeniden yüklemesinde veri yeniden doldurma, bir sayfa yeniden yüklendiğinde uygulamanın durumunu geri yükleme ve başlatma sürecini ifade eder. Sunucu tarafından oluşturulan bir Next.js uygulamasında, başlangıç ​​durumu önce sunucuda işlenir ve ardından istemciye gönderilir.

İstemcide JavaScript kodu, sunucudan alınan seri hale getirilmiş durumu alıp serisini kaldırarak uygulama durumunu yeniden oluşturmaktan sorumludur.

Bunu yaparak uygulama, gerekli verileri sorunsuz bir şekilde geri yükleyebilir ve kullanıcının oturumunu koruyabilir. Bu yaklaşım, gereksiz veri alımını önler ve sayfalar arasında gezinirken veya uygulamayı yeniden yüklerken kesintisiz bir kullanıcı deneyimi sağlar.

Next.js uygulamalarında Redux Toolkit kullanmanın avantajlarından biri basitliği ve geliştirici dostu özellikleridir. Eylemleri, indirgeyicileri ve mağaza yapılandırmasını tanımlamak için gereken standart kodu önemli ölçüde azaltır ve durum yönetiminde Redux ile çalışmayı daha kolay ve verimli hale getirir.