Mendapatkan Pemilih dalam Redux

Kadang-kadang sangat berguna untuk menghilangkan kod yang berlebihan dalam aplikasi, dan juga untuk mengkapsulkan data.

Mari buka aplikasi produk kami. Perhatikan bahawa di beberapa tempat aplikasi, kami menggunakan pemilih untuk mengambil slice produk untuk melakukan beberapa tindakan terhadapnya.

Sekarang, mari buka productsSlice.js kami, tatal ke akhir fail dan tambahkan beberapa baris kod di mana kami akan menulis dua pemilih dan eksportnya. Satu fungsi akan untuk mendapatkan semua produk:

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

Dan selepas itu, yang kedua - untuk mendapatkan satu produk mengikut id:

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

Sudah tentu anda mungkin mempunyai soalan yang wajar - dari mana datangnya kekusutan seperti ini: state.products.products? Jawapannya mudah, kerana dalam pelajaran lepas kami menukar struktur slice dan sekarang produk kami akan berada sebagai array dalam properti berasingan products bagi slice produk state.products (ingat, di sini state ialah objek keadaan root Redux yang mengandungi semua slice).

Dengan cara ini, kami hanya memindahkan kod untuk fungsi pemilih ke satu tempat dalam aplikasi dan sekarang kami perlu membuat perubahan yang sesuai di mana kami menggunakannya. Mari mulakan dengan fail ProductsList.jsx. Import ke dalamnya selectAllProducts, kerana di sini kami perlu mendapatkan semua produk:

import { selectAllProducts } from './productsSlice'

Dan pada permulaan kod fungsi ProductsList, gantikan:

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

Dengan baris:

const products = useSelector(selectAllProducts)

Sekarang mari pergi ke fail ProductPage.jsx. Di sini kami memerlukan produk mengikut id. Mari buat penggantian baris (jangan lupa tentang import):

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

Kepada:

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

Buat penggantian yang serupa sendiri dalam fail EditProductForm.jsx. Di sini kami juga memerlukan produk mengikut id.

Ingat, pengoptimuman sedemikian hanyalah untuk kemudahan anda dan anda boleh melakukannya apabila anda menganggapnya perlu dan sesuai. Dan dalam contoh kami, bayangkan jika kami menulis kod fungsi pemilih setiap kali di tempat yang berbeza, dan kemudian menukar struktur keadaan, dan terpaksa membetulkannya dalam semua komponen.

Buka aplikasi pelajar anda. Buka fail studentsSlice.js di dalamnya. Di bahagian paling bawah fail, tulis dan eksport, seperti yang ditunjukkan dalam pelajaran, dua pemilih untuk mendapatkan semua pelajar selectAllStudents dan untuk mendapatkan satu pelajar mengikut id selectStudentById.

Sekarang import selectAllStudents dan selectStudentById ke dalam fail StudentsList.jsx, StudentPage.jsx dan EditStudentForm.jsx, buat perubahan yang sesuai dalam fail-fail ini, seperti yang ditunjukkan dalam pelajaran.