Manajemen negara terletak di jantung aplikasi web modern, memainkan peran penting dalam mengelola data pengguna dan menangkap interaksi mereka. Baik itu mengisi keranjang belanja di platform e-niaga, atau mempertahankan sesi pengguna yang masuk setelah autentikasi, tindakan ini dimungkinkan melalui manajemen status yang efisien.

Pada dasarnya, pengelola negara mengizinkan aplikasi untuk mengakses dan memproses data untuk menghasilkan hasil yang diinginkan. Next.js menyediakan dukungan untuk beberapa solusi manajemen status. Namun, dalam panduan ini, kami akan berfokus pada penggunaan Redux Toolkit untuk pengelolaan status.

Dalam aplikasi Next.js, manajemen status biasanya melibatkan dua jenis status: status global dan status komponen. Status global berisi informasi yang dibagikan oleh semua komponen dalam aplikasi seperti status autentikasi pengguna, sedangkan status komponen menyimpan data khusus untuk masing-masing komponen.

Baik status global maupun komponen memainkan peran penting dalam mengelola status aplikasi secara keseluruhan, memfasilitasi penanganan data yang efisien.

Redux diadopsi secara luas sebagai solusi manajemen negara di seluruh berbagai framework JavaScript. Namun, ini dapat menimbulkan kerumitan, terutama untuk proyek yang lebih kecil.

Salah satu kelemahan umum adalah kebutuhan untuk menulis kode boilerplate berulang untuk menentukan jenis tindakan, pembuat tindakan, dan reduksi. Hal ini dapat menyebabkan peningkatan redundansi kode.

Untuk mengatasi tantangan tersebut, Perangkat Redux (RTK) datang untuk menyelamatkan. Ini terutama bertujuan untuk merampingkan pengalaman pengembangan saat bekerja dengan Pustaka manajemen negara redux. Ini menyediakan seperangkat alat dan utilitas yang menyederhanakan tugas umum Redux, menghilangkan kebutuhan akan kode boilerplate yang berlebihan.

Sekarang, mari selami penggunaan Redux Toolkit untuk mengelola status di aplikasi Next.js. Untuk memulai, buat proyek Next.js dan instal dependensi yang diperlukan dengan mengikuti langkah-langkah di bawah ini.

1. Buat proyek Next.js baru secara lokal dengan menjalankan perintah di bawah ini di terminal Anda:

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

2. Setelah membuat proyek, navigasikan ke direktori proyek dengan menjalankan:

   cd next-redux-toolkit

3. Terakhir, instal dependensi yang diperlukan dalam proyek Anda menggunakan npm, manajer paket Node.

   npm install @reduxjs/toolkit react-redux

Setelah menyiapkan proyek Next.js dasar, Anda sekarang siap membuat aplikasi demo Next.js yang menggunakan Redux Toolkit untuk manajemen status.

Anda dapat menemukan kode proyek ini di sini repositori GitHub.

Konfigurasikan Toko Redux

Toko Redux adalah wadah pusat yang menampung seluruh status aplikasi. Ini berfungsi sebagai satu-satunya sumber data aplikasi, memberikan status ke setiap komponen. Store bertanggung jawab untuk mengelola dan memperbarui status melalui tindakan dan reduksi—memfasilitasi manajemen status di seluruh aplikasi.

Untuk membangun toko Redux, buat yang baru redux folder di direktori root proyek Next.js Anda. Di dalam folder ini, buat yang baru store.js file dan tambahkan kode berikut:

impor {configureStore} dari'@reduxjs/toolkit';
impor profileReducer dari'./reducers/profileSlice';
eksporbawaan configureStore({
 peredam:{
 profil: profileReducer
 }
})

Kode di atas memanfaatkan configureStore berfungsi untuk membuat dan mengkonfigurasi toko Redux. Konfigurasi toko termasuk menentukan reduksi menggunakan peredam obyek.

Reducer, dalam hal ini, menentukan bagaimana keadaan aplikasi harus berubah sebagai respons terhadap tindakan tertentu atau kejadian tertentu. Dalam contoh ini, Profil peredam bertanggung jawab untuk mengelola tindakan yang terkait dengan status profil.

Dengan menyiapkan toko Redux, kode menetapkan struktur inti untuk mengelola status aplikasi menggunakan Redux Toolkit.

Mendefinisikan Slice Negara

Irisan status redux adalah komponen yang merangkum logika untuk mengelola status item data tertentu dalam penyimpanan redux yang dikonfigurasi. Irisan ini dibuat menggunakan createSlice fungsi, yang secara otomatis menghasilkan peredam, pembuat tindakan, dan jenis tindakan untuk irisan.

Dalam redux direktori, buat folder baru dan beri nama reduksi. Di dalam folder ini, buat profileSlice.js file, dan tambahkan kode berikut.

impor {createSlice} dari'@reduxjs/toolkit';
const profileSlice = buatSlice({
 nama: 'Profil',
 keadaan awal: {
 nama: 'tidak ada'
 },
 reduksi: {
 SET_NAME: (negara, tindakan) => {
 state.name = action.payload
 }
}})
eksporconst {SET_NAME} = profileSlice.actions;
eksporbawaan profileSlice.reducer;

Dalam kode yang disediakan, file createSlice fungsi membuat irisan status untuk status profil pengguna. Itu profileSlice objek termasuk nama irisan dan itu kondisi awal, yang berisi nilai default untuk properti status.

Selain itu, objek slice juga mengambil a reduksi properti yang mendefinisikan penangan tindakan untuk irisan ini. Dalam hal ini, satu fungsi peredam bernama SET_NAME. Intinya, setelah Anda memanggil fungsi ini, ia akan memperbarui properti nama negara bagian dengan data yang disediakan.

Itu createSlice fungsi menghasilkan pembuat tindakan dan jenis tindakan secara otomatis berdasarkan reduksi yang ditentukan. Yang diekspor SET_NAME pencipta tindakan dan profileSlice.reducer mewakili pembuat tindakan yang dihasilkan dan fungsi peredam untuk irisan profil.

Dengan membuat irisan status ini, komponen di dalam aplikasi dapat menggunakan SET_NAME tindakan dan meneruskan payload yang diinginkan untuk memperbarui nama profil di negara bagian.

Buat Komponen untuk Menguji Fungsi Manajemen Status RTK

Buka index.js berkas di halaman direktori, hapus kode Next.js boilerplate, dan tambahkan kode berikut.

impor gaya dari'@/styles/Home.module.css'
impor {useRef} dari'reaksi'
impor {useSelector, useDispatch} dari'bereaksi-redux'
impor {SET_NAME} dari'../../redux/reducers/profileSlice'
fungsiNama tampilan(){
const {nama} = useSelector((negara) => profil negara)
kembali (

 Saya {nama} !!</h1> 
 ) }
eksporbawaanfungsiRumah() {
const namamasukan = useRef()
const pengiriman = useDispatch()
fungsisubmitName() {
menghibur.log (inputName.current.value)
 pengiriman (SET_NAME(inputName.current.value))
 }
kembali (
 <>

'Masukkan nama' ref={namamasukan} />
Masukkan nama</button>

 </main>
 </>
 )}

Kode di atas membuat dan merender komponen Next.js yang memungkinkan pengguna memasukkan nama dan menampilkan nama yang disediakan di halaman browser. Secara efektif, mengelola status aplikasi menggunakan Redux Toolkit.

Itu Nama tampilan komponen menggunakan useSelector kait untuk mengakses nama properti dari status profil di toko Redux dan merendernya di halaman.

Untuk memasukkan nama, pengguna mengklik Masukkan nama tombol. Ini memanggil submitName fungsi, yang mengirimkan SET_NAME tindakan dengan nilai input sebagai payload. Tindakan ini memperbarui properti name di status profil.

Perbarui File _app.js

Terakhir, untuk mengonfigurasi Redux Toolkit untuk digunakan di seluruh aplikasi Next.js, Anda perlu membungkus aplikasi dengan Penyedia Redux—ini memastikan bahwa penyimpanan Redux dan status yang tersedia dapat diakses oleh semua komponen di aplikasi.

Buka _app.js file dan perbarui sebagai berikut:

impor {Pemberi} dari'bereaksi-redux'
impor toko dari'../../redux/toko'
eksporbawaanfungsiAplikasi({ Komponen, pageProps }) {
kembali (


 </Penyedia> )
}

Sekarang, lanjutkan dan mulai server pengembangan untuk mencerminkan perubahan yang Anda buat, dan arahkan ke http://localhost: 3000 di browser Anda untuk menguji aplikasi.

npm menjalankan dev

Menangani Rehidrasi Data saat Memuat Ulang Halaman

Rehidrasi data pada pemuatan ulang halaman mengacu pada proses pemulihan dan inisialisasi status aplikasi saat halaman dimuat ulang. Dalam aplikasi Next.js yang dirender server, status awal pertama kali dirender di server dan kemudian dikirim ke klien.

Pada klien, kode JavaScript bertanggung jawab untuk merekonstruksi status aplikasi dengan mengambil dan membatalkan serialisasi status serial yang diterima dari server.

Dengan demikian, aplikasi dapat mengembalikan data yang diperlukan dengan mulus dan mempertahankan sesi pengguna. Pendekatan ini menghindari pengambilan data yang tidak perlu dan memastikan pengalaman pengguna tanpa gangguan saat menavigasi antar halaman atau memuat ulang aplikasi.

Salah satu keuntungan menggunakan Redux Toolkit di aplikasi Next.js adalah kesederhanaan dan fitur yang ramah pengembang. Ini secara signifikan mengurangi kode boilerplate yang diperlukan untuk menentukan tindakan, reduksi, dan konfigurasi penyimpanan, membuatnya lebih mudah dan lebih efisien untuk bekerja dengan Redux dalam pengelolaan negara.