Reducer di Redux

Pada pelajaran sebelumnya kita menggunakan fungsi createSlice untuk membuat slice untuk produk products dan reducer yang akan memperbarui slice ini, yang disimpan dalam store. Sekali lagi saya ingatkan, bahwa di Redux data state diubah menggunakan reducer.

Perlu diingat, bahwa ada sejumlah batasan yang diterapkan pada reducer. Reducer memperbarui state hanya berdasarkan nilai yang diterima dari state saat ini dan objek action, lalu memutuskan bagaimana mengubah state dan mengembalikan nilai barunya.

Kita tahu bahwa secara default objek dan array di JavaScript bersifat mutable (dapat diubah). Juga kita tahu, bahwa mengubah state secara langsung tidak diperbolehkan, dalam hal ini kita harus bekerja hanya dengan salinannya. Aturan ini harus dipatuhi oleh reducer juga. Namun menulis logika seperti ini secara manual bisa menjadi tugas yang cukup melelahkan dan rumit, dan di sinilah fungsi createSlice datang untuk membantu, yang menggunakan library Immer, yang mengubah kode 'mutable' Anda menjadi 'immutable'. Dengan demikian, kita bisa 'berdosa' dan menyederhanakan hidup hanya ketika menggunakan fungsi createSlice atau createReducer.

Batasan pada reducer juga termasuk penggunaan logika asinkron, perhitungan nilai acak, dan eksekusi "efek samping" lainnya. Sekarang, setelah mengenal reducer lebih dekat, mari kembali ke aplikasi produk kita.

Di aplikasi kita ada store, yang kita buat pada pelajaran sebelumnya, tetapi sejauh ini tidak ada apa pun di dalamnya. Mari buka file store.js kita dan tambahkan sedikit kode. Pertama, impor fungsi reducer untuk produk ke dalamnya:

import productsReducer from '../parts/products/productsSlice'

Sekarang sebagai reducer kita dapat menentukan fungsi yang diimpor productsReducer:

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

Dengan baris di atas kita memberi tahu store kita, bahwa sekarang ketika action terjadi semua data untuk slice state.products akan diperbarui oleh reducer productsReducer.

Sekarang Anda dapat menjalankan aplikasi (perhatikan, peringatan tentang reducer tidak valid di konsol telah hilang!), buka Redux DevTools di browser dan jelajahi tab-tabnya. Misalnya, dengan mengklik tab State di dalam tab Inspector kita dapat melihat dua objek produk kita, yang ditampilkan sebagai nilai awal state saat aplikasi pertama kali dijalankan. Pada tab Log monitor kita melihat slice apa yang dimiliki oleh global state - yaitu slice products, yang mencakup dua objek. Lihat juga tab Chart.

Buka aplikasi siswa Anda dan ubah kode file store.js, seperti yang ditunjukkan dalam pelajaran.

Jalankan aplikasi Anda di browser dan jelajahi tab-tab ekstensi Redux DevTools.