Pembahasan Cara Kerja Aplikasi Redux

Pada pelajaran sebelumnya, kita telah mengimplementasikan semua komponen yang diperlukan untuk menjalankan aplikasi Redux. Mari kita simpulkan dan tinjau secara singkat tahapan-tahapan utama kerja aplikasi kita dengan produk.

Saat pertama kali dijalankan, aplikasi kita mengambil dari store daftar dua produk dengan menggunakan useSelector dan menampilkannya di layar. Di layar juga ditampilkan formulir, di mana kita dapat memasukkan data produk baru. Ketika pengguna menekan tombol simpan, maka penangan tombol mengirimkan aksi productAdded, yang berisi data produk baru yang dimasukkan oleh pengguna ke dalam formulir. Fungsi reducer, yang kita tulis untuk slice produk, menerima action ini dan menambahkan objek dengan produk baru ke dalam array produk. Store memberi tahu komponen bahwa data state yang disimpan telah diubah. Komponen ProductsList kita membaca array yang telah diubah, memanggil render, sehingga kita melihat produk yang ditambahkan dalam daftar produk.

Sekarang buka Redux DevTools di browser dan tambahkan satu produk lagi di aplikasi, lalu lihat tab Log monitor, di sini kita dapat melihat bagaimana state kita saat aplikasi dijalankan, dan bagaimana kemudian, setelah menekan tombol simpan, action muncul. Kita dapat melihat propertinya payload dan perubahan dalam state global.

Pada bab berikutnya, kita akan bekerja lebih mendalam dengan data di aplikasi Redux kita.