Lấy Selector trong Redux

Đôi khi rất hữu ích để loại bỏ mã thừa trong ứng dụng, cũng như đóng gói dữ liệu.

Hãy mở ứng dụng sản phẩm của chúng ta. Hãy chú ý rằng ở một vài nơi trong ứng dụng, chúng ta sử dụng selector để lấy slice sản phẩm để thực hiện một số hành động với nó.

Bây giờ chúng ta sẽ mở productsSlice.js, cuộn xuống cuối file và thêm một vài dòng mã, trong đó chúng ta viết hai selector và export chúng. Một hàm sẽ dùng để lấy tất cả sản phẩm:

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

Và sau nó là hàm thứ hai - để lấy một sản phẩm theo id:

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

Tất nhiên bạn có thể có câu hỏi chính đáng - tại sao chúng ta lại có cấu trúc lồng nhau như vậy: state.products.products? Câu trả lời rất đơn giản, chúng ta đã thay đổi cấu trúc slice trong bài học trước và giờ đây các sản phẩm của chúng ta sẽ nằm dưới dạng mảng trong một thuộc tính riêng biệt products của slice sản phẩm state.products (hãy nhớ rằng ở đây state - là đối tượng gốc trạng thái Redux, chứa tất cả slice).

Như vậy chúng ta chỉ đơn giản di chuyển mã cho các hàm selector đến một nơi duy nhất trong ứng dụng và bây giờ chúng ta cần thực hiện các thay đổi tương ứng ở những nơi đã sử dụng chúng. Hãy bắt đầu với file ProductsList.jsx. Import vào đó selectAllProducts, vì ở đây chúng ta cần lấy tất cả sản phẩm:

import { selectAllProducts } from './productsSlice'

Và ở đầu mã của hàm ProductsList, hãy thay thế:

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

Bằng dòng:

const products = useSelector(selectAllProducts)

Bây giờ hãy chuyển sang file ProductPage.jsx. Ở đây chúng ta cần một sản phẩm theo id. Hãy thay thế dòng (đừng quên import):

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

Bằng:

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

Hãy tự thực hiện thay thế tương tự trong file EditProductForm.jsx. Ở đây chúng ta cũng cần một sản phẩm theo id.

Hãy nhớ rằng, việc tối ưu hóa như vậy chỉ dành cho sự tiện lợi của bạn và bạn có thể thực hiện nó khi bạn cảm thấy cần thiết và thuận tiện. Trong ví dụ của chúng ta, hãy tưởng tượng rằng chúng ta viết mã cho hàm-selector mỗi lần ở những nơi khác nhau, và sau đó chúng ta thay đổi cấu trúc state, và khi đó sẽ phải sửa nó trong tất cả các component.

Hãy mở ứng dụng quản lý sinh viên của bạn. Mở file studentsSlice.js trong đó. Ở cuối file, hãy viết và export, như đã được trình bày trong bài học, hai selector cho việc lấy tất cả sinh viên selectAllStudents và để lấy một sinh viên theo id selectStudentById.

Bây giờ hãy import selectAllStudents và selectStudentById vào các file StudentsList.jsx, StudentPage.jsx và EditStudentForm.jsx, thực hiện các thay đổi tương ứng trong các file này, như đã trình bày trong bài học.