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:

products/productsSlice.jsexport const selectAllProducts = (state) => state.products.products

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

products/productsSlice.jsexport 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:

products/ProductsList.jsximport { selectAllProducts } from './productsSlice'

Dan pada permulaan kod fungsi ProductsList, gantikan:

products/ProductsList.jsxconst products = useSelector((state) => state.products)

Dengan baris:

products/ProductsList.jsxconst 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):

products/ProductPage.jsxconst product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

Kepada:

products/ProductPage.jsxconst 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.