Perbincangan tentang Cara Aplikasi Redux Berfungsi

Dalam pelajaran lepas, kami telah melaksanakan semua komponen yang diperlukan untuk aplikasi Redux berfungsi. Mari kita buat kesimpulan dan melalui secara ringkas peringkat-peringkat utama cara aplikasi kami berfungsi dengan produk.

Pada pelancaran pertama, aplikasi kami mengambil senarai dua produk dari store menggunakan useSelector dan memaparkannya pada skrin. Skrin juga memaparkan borang, di mana kami boleh memasukkan data produk baru. Apabila pengguna menekan tompok simpan, pengendali tombol menghantar tindakan productAdded, yang mengandungi data baru produk, yang dimasukkan oleh pengguna ke dalam borang. Fungsi-pengurang, yang kami tulis untuk slice dengan produk, menerima action ini dan menambah objek dengan produk baru ke dalam tatasusunan dengan produk. Store memberitahu komponen bahawa data state yang disimpan telah diubah. Komponen kami ProductsList membaca tatasusunan yang diubah, memanggil rendering, hasilnya kami melihat dalam senarai produk yang ditambah produk.

Sekarang buka Redux DevTools dalam pelayar dan tambah satu lagi produk dalam aplikasi, kemudian lihat pada tab Log monitor, di sini kami boleh melihat bagaimana state kami semasa pelancaran aplikasi, dan bagaimana kemudian, selepas menekan tombol simpan, action muncul. Kami boleh melihat sifatnya payload dan perubahan dalam state global.

Dalam bab seterusnya, kami akan bekerja lebih mendalam dengan data dalam aplikasi Redux kami.