Selektor dan Hook useSelector di Redux
Pada pelajaran sebelumnya, kita telah menyimpan data produk ke dalam store. Bagaimana cara kita mengambilnya dari store?
Untuk melakukannya, kita perlu menulis sebuah fungsi selektor. Fungsi ini mengetahui cara mengekstrak bagian tertentu dari nilai state yang disimpan dalam store dan membantu menghindari penulisan kode yang berulang saat aplikasi berkembang. Fungsi ini menerima state sebagai input, dan mengeluarkan slice state yang diperlukan. Contohnya seperti ini:
const selectValue = state => state.some.value
Di awal tutorial disebutkan bahwa
store memiliki metode getState. Dan kita
dapat dengan mudah menggunakannya untuk
mendapatkan nilai state:
const value = selectValue(store.getState())
Masalahnya adalah komponen React kita
tidak dapat mengakses store secara langsung,
karena dilarang untuk mengimpornya
ke dalam file komponen. Namun kita memiliki cara
untuk mendapatkan data di dalam komponen menggunakan
hook React-Redux useSelector. Selain itu,
dengan hook ini, komponen kita akan selalu menerima
data yang terbaru:
const count = useSelector(selectValue)