Apa itu React Redux dan Bagaimana Cara Menggunakannya?

Redux adalah perpustakaan manajemen status gratis yang bekerja di front-end aplikasi JavaScript, mengelola status setiap komponen dalam UI. Pustaka Redux memfasilitasi pemisahan antara kode yang mengelola dan menyimpan data dalam aplikasi, dan kode yang mengelola kejadian dan efeknya pada berbagai komponen UI aplikasi.

Salah satu nilai jual utama Redux adalah fleksibel. Anda dapat menggunakan Redux dengan hampir semua kerangka kerja atau pustaka JavaScript.

Tim Redux telah membuat tiga library, yaitu Redux, React-Redux, dan Redux Toolkit. Ketiga library ini bekerja sama untuk memberikan Anda pengalaman pengembangan React yang maksimal, dan dalam artikel tutorial ini, Anda akan belajar cara menggunakannya.

Pentingnya React-Redux

Meskipun Redux adalah perpustakaan manajemen status independen, menggunakannya dengan kerangka kerja front-end atau perpustakaan apa pun memerlukan perpustakaan pengikatan UI. Pustaka pengikatan UI menangani logika interaksi penampung (atau penyimpanan) status, yang merupakan serangkaian langkah yang telah ditentukan sebelumnya yang menghubungkan kerangka kerja front-end ke pustaka Redux.

React-Redux adalah perpustakaan pengikatan UI Redux resmi untuk aplikasi React, dan dikelola oleh tim Redux.

Terkait: Cara Membuat Aplikasi React Pertama Anda Dengan JavaScript

Menginstal Redux di Direktori Proyek Anda

Ada dua cara untuk mendapatkan akses ke perpustakaan Redux di aplikasi React Anda. Pendekatan yang disarankan oleh tim Redux adalah menggunakan perintah berikut saat membuat proyek React baru:

npx create-react-app aplikasi saya --template redux

Perintah di atas secara otomatis mengkonfigurasi Redux Toolkit, React-Redux, dan toko Redux. Namun, jika Anda ingin menggunakan Redux dalam proyek React yang sudah ada, Anda cukup menginstal pustaka Redux sebagai dependensi dengan perintah berikut:

npm instal redux

Diikuti oleh perpustakaan UI pengikatan React-Redux:

npm install react-redux

Dan toolkit Redux:

npm instal @reduxjs/toolkit

Pustaka Redux Toolkit juga penting karena membuat proses konfigurasi penyimpanan Redux menjadi cepat dan mudah.

Membuat Toko Redux

Sebelum Anda dapat mulai bekerja dengan perpustakaan Redux, Anda harus membuat wadah (atau penyimpanan) status Redux. Membuat toko Redux diperlukan karena itu adalah objek yang menyimpan status aplikasi Redux global.

Bereaksi, seperti kebanyakan kerangka kerja front-end, memiliki titik masuk dalam aplikasinya, yang merupakan file atau grup file di tingkat atas. Itu index.html dan index.js file adalah dua file yang berada di level atas aplikasi React, yang berada di atas aplikasi.js file dan semua komponen dalam aplikasi.

Sehingga index.js file adalah tempat yang ideal untuk membuat toko Redux.

Memperbarui index.js Dengan Redux Store

impor Bereaksi dari 'bereaksi'
impor ReactDOM dari 'react-dom'
impor Aplikasi dari './Aplikasi'
impor reportWebVitals dari "./reportWebVitals"
impor {configureStore} dari "@reduxjs/toolkit"
impor { Provider } dari 'react-redux'
impor pengguna dari './reducers/user'
toko const = configureStore({
 peredam:{
 pengguna
 }
})
ReactDOM.render(




,
 document.getElementById('root')
)
reportWebVitals();

Ada banyak hal yang harus dibongkar dalam kode di atas, tetapi tempat terbaik untuk memulai adalah dengan konfigurasikan Toko fungsi. Segera Anda akan mulai melihat manfaat menginstal perpustakaan Redux Toolkit sebagai konfigurasikan Toko function membuat toko Redux hanya dengan tiga baris kode.

Aplikasi React Anda tidak akan tahu bahwa toko Redux ada tanpa komponen penyedia, yang berasal dari library binding React-Redux. Komponen penyedia mengambil satu prop (toko) dan membungkus dirinya sendiri di sekitar aplikasi React, membuat toko Redux dapat diakses secara global.

Impor baru ketiga dan terakhir di index.js file di atas adalah peredam pengguna, yang sangat penting untuk pengoperasian toko Redux Anda.

Mengapa Peredam Penting?

Tujuan dari peredam adalah untuk mengubah Status komponen UI berdasarkan tindakan yang dilakukan. Misalnya, jika Anda membuat aplikasi sekolah online, Anda akan mengharuskan setiap pengguna masuk ke aplikasi untuk mendapatkan akses menggunakan komponen masuk. Komponen hebat lainnya untuk aplikasi ini adalah komponen pengguna aktif, yang akan menampilkan nama atau alamat email setiap pengguna saat mereka masuk ke aplikasi Anda.

Pada contoh di atas, komponen pengguna aktif akan berubah setiap kali pengguna melakukan tindakan masuk ke akunnya. Oleh karena itu, contoh ini adalah situasi yang ideal untuk peredam. Penting juga untuk diingat bahwa peredam hanya dapat menjalankan fungsinya karena Redux store yang memberinya akses ke status komponen apa pun dan tindakan yang diperlukan untuk menjalankannya tugas.

Membuat Peredam Pengguna

impor { createSlice } dari "@reduxjs/toolkit";
ekspor const userSlice = createSlice({
 nama: "pengguna",
 initialState: { nilai: {email: ""}},
 reduksi: {
 login: (status, tindakan) => {
 state.value = action.payload
 },
 }
})
ekspor const {login} = userSlice.actions
ekspor default userSlice.reducer;

Dalam React's srcdirektori Anda dapat membuat direktori peredam, di situlah Anda akan menyimpan peredam pengguna dan peredam lain yang ingin Anda tambahkan ke toko Redux Anda. Itu pengguna.js file di atas mengimpor buat Irisan fungsi dari Redux Toolkit.

Itu buat Irisan fungsi menerima nama, sebuah keadaan awal, dan objek peredam yang menyimpan beberapa fungsi peredam. Namun, objek reduksi di atas hanya memiliki satu fungsi peredam yang disebut Gabung yang mengambil status dan tindakan sebagai argumen dan mengembalikan status baru.

File user.js mengekspor peredam login. Komponen masuk mengimpornya dan menggunakannya di gunakan Pengiriman() kait.

Membuat Komponen Masuk

impor Bereaksi dari 'bereaksi';
impor Tautan dari '@mui/material/Link';
impor TextField dari '@mui/material/TextField';
impor Tipografi dari '@mui/material/Tipografi';
import { Button, Box } dari '@mui/material';
impor { useDispatch } dari 'react-redux';
import { login } dari '../reducers/user';
impor { useState } dari 'bereaksi';
fungsi Masuk() {
 const pengiriman = useDispatch()
 const [email, setEmail] = useState('')
 const handleKirim = () => {
 pengiriman (login({email: email}))
 }
kembali (


sx={{
saya: 8,
tampilan: 'fleksi',
flexDirection: 'kolom',
alignItems: 'pusat',
}}>
 Masuk 
label="Alamat Email"
diperlukan
id="email"
nama="email"
batas = "biasa"
onChange={(e) => setEmail (e.target.value)}
/>
label="Kata Sandi"
diperlukan
id = "kata sandi"
nama = "kata sandi"
ketik = "kata sandi"
batas = "biasa"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
lupa Password?

varian="berisi"
sx={{mt: 2}}
onClick={handleSubmit}
>
Masuk





);
}
ekspor Masuk default;

Komponen masuk di atas menggunakan perpustakaan MUI. Ini membuat formulir masuk sederhana yang memerlukan email dan kata sandi pengguna. Mengklik tombol masuk akan memicu fungsi onClick, yang akan memanggil menanganiKirim fungsi.

Itu menanganiKirim fungsi menggunakan gunakanNegara() dan gunakanDispact() kait bersama dengan peredam masuk untuk membuat alamat email pengguna aktif tersedia di toko Redux. Dari toko Redux, setiap komponen di aplikasi React sekarang memiliki akses ke email pengguna yang aktif.

Terkait: Kait: Pahlawan Bereaksi Komponen pengguna aktif berikut mengambil alamat email pengguna aktif dengan bantuan: gunakanSelector() kait dan merendernya ke UI aplikasi.

File ActiveUser.js

impor Bereaksi dari "bereaksi";
import { useSelector } dari "react-redux";
fungsi Pengguna Aktif() {
 const pengguna = useSelector((state) => state.user.value)
 kembali (


Pengguna Aktif

 {pengguna.email} 




 );
}

File App.js yang Diperbarui

Lihatlah sedikit kode ini:

impor Bereaksi dari "bereaksi"; impor ActiveUsers dari "./components/ActiveUsers"; impor Masuk dari "./components/Signin";
fungsi Aplikasi() {
kembali ( 
);
}
ekspor Aplikasi default; 

Itu aplikasi.js file di atas merender pengguna aktif dan komponen masuk di aplikasi React Anda membuat output berikut di browser Anda:

Jika pengguna masuk ke aplikasi, komponen pengguna aktif akan segera memperbarui dengan email pengguna aktif baru.

UI yang Diperbarui

Kapan Anda Harus Menggunakan Redux?

Redux adalah salah satu perpustakaan manajemen negara paling populer, terutama karena ia melakukan pekerjaan yang sangat baik untuk membuat kode yang dapat diprediksi dan andal. Jika banyak komponen dalam suatu aplikasi menggunakan status aplikasi yang sama, Redux adalah pilihan yang ideal.

Menggunakan contoh sekolah di atas, komponen masuk, komponen pengguna aktif, peserta kelas komponen, dan bahkan komponen profil akan memerlukan alamat email pengguna (atau yang unik lainnya) pengenal). Inilah sebabnya mengapa Redux adalah pilihan terbaik di sini.

Namun, jika Anda memiliki status yang hanya digunakan oleh satu atau dua komponen paling banyak, maka opsi yang lebih baik adalah React props.

Cara Menggunakan Alat Peraga di ReactJS

Jika Anda mencari tips tentang cara menggunakan props di ReactJS, Anda berada di tempat yang tepat.

Baca Selanjutnya

Tentang Penulis