Mendapatkan Selector di Redux

Terkadang sangat berguna untuk menghilangkan kode berlebih dalam aplikasi, serta menginkapsulasi data.

Mari buka aplikasi produk kita. Perhatikan bahwa di beberapa tempat aplikasi kita, dengan menggunakan selector, kita mengambil slice produk untuk melakukan beberapa tindakan.

Dan sekarang kita akan membuka file productsSlice.js kita, turun ke paling akhir file dan tambahkan beberapa baris kode, di mana kita akan menulis dua selector dan ekspor mereka. Satu fungsi akan untuk mendapatkan semua produk:

export const selectAllProducts = (state) => state.products.products

Dan setelahnya yang kedua - untuk mendapatkan satu produk berdasarkan id:

export const selectProductById = (state, productId) =>
	state.products.products.find((product) => product.id === productId)

Tentu Anda mungkin memiliki pertanyaan yang wajar - dari mana kita mendapatkan susunan seperti ini: state.products.products? Jawabannya sederhana, pada pelajaran sebelumnya kita mengubah struktur slice dan sekarang produk kita akan berada dalam bentuk array di properti terpisah products dari slice produk state.products (ingat, bahwa di sini state adalah objek root dari state Redux, yang berisi semua slice).

Dengan demikian kita hanya memindahkan kode untuk fungsi-fungsi selector ke satu tempat dalam aplikasi dan sekarang kita perlu melakukan perubahan yang sesuai di tempat, di mana kita menggunakannya. Mari mulai dengan file ProductsList.jsx. Impor ke dalamnya selectAllProducts, karena di sini kita perlu mendapatkan semua produk:

import { selectAllProducts } from './productsSlice'

Dan di awal kode fungsi ProductsList, ganti:

const products = useSelector((state) => state.products)

Dengan baris:

const products = useSelector(selectAllProducts)

Dan sekarang beralih ke file ProductPage.jsx. Di sini kita membutuhkan produk berdasarkan id. Mari lakukan penggantian baris (jangan lupa tentang impor):

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

Menjadi:

const product = useSelector((state) => selectProductById(state, productId))

Lakukan penggantian serupa sendiri di file EditProductForm.jsx. Di sini kita juga membutuhkan produk berdasarkan id.

Ingat, bahwa optimasi seperti ini hanya untuk kenyamanan Anda dan Anda dapat melakukannya ketika Anda menganggapnya perlu dan nyaman. Dan dalam contoh kita, bayangkan jika kita menulis kode fungsi-selector setiap kali di tempat yang berbeda, dan kemudian kita mengubah struktur state, dan harus memperbaikinya di semua komponen.

Buka aplikasi siswa Anda. Buka di dalamnya file studentsSlice.js. Di paling bawah file, tulis dan ekspor, seperti yang ditunjukkan dalam pelajaran, dua selector untuk mendapatkan semua siswa selectAllStudents dan untuk mendapatkan satu siswa berdasarkan id selectStudentById.

Sekarang impor selectAllStudents dan selectStudentById ke dalam file StudentsList.jsx, StudentPage.jsx dan EditStudentForm.jsx, lakukan di file-file tersebut perubahan yang sesuai, seperti yang ditunjukkan dalam pelajaran.