Redux: Sử dụng selector

Tram Ho

Khi học qua Redux có thể bạn đã từng nghe “giữ state đơn giản nhất, và sử dụng nó khi cần’, một phần trong bài học đó bạn cũng có thể đã sử dụng đến redux selector.

Một selector function nhận vào input là state và trả về một giá trị mong muốn dựa trên state đó. ví dụ

Bạn có thể sử dụng selector ở khắp mọi nơi miễn sao nó là một component, một selector thường bắt đầu với prefix get[something] hoặc select[something] hoặc có thể là một suffix [something]Selector.

Việc render:

  • Khi một action được dispatch, useSelector sẽ thực hiện so sánh giữa kết quả trước đó và kết quả hiện tại, nếu khác, component bị force để re-render.

  • useSelector sử dụng so sánh === chứ không dùng phương pháp shallow compare

  • Lý do sử dụng useSelector:

    • Tái sử dụng, selector có thể được sử dụng ở nhiều nơi, nhiều component khác nhau mà không cần khai báo lại
    • Tinh gọn, chúng ta có một state car chứa name, brand, year, nếu muốn lấy brand thì chỉ cần selector getBrandCar là dễ hiểu
    • Cập nhật, khi structure của redux store thay đổi, chúng ta chỉ cần cập nhật lại selector là xong

Sử dụng:

Vì selector sử dụng phương thức so sánh “===” nên nếu trả về array, object thông qua việc tính toán thì component sẽ bị trigger re-render. Trong lúc re-render cho dù data không thay đổi, thì hàm selectFilteredSortedTransformedData vẫn bị gọi lại:

Cách giải quyết vấn đề, sử dụng reselect:

Lưu ý:

  • Nếu selector có input là 1 prop của component hãy đưa selector ra ngoài component

  • Nhiều instance của component: Khi một selector được sử dụng trong nhiều instance của một component và cũng phụ thuộc vào prop, VD:

    Điều ta cần làm bây giờ là hãy chắc chắn mỗi instance component có một instance selector riêng biệt, như ví dụ ở trên thì không đúng vì 2 instance đều trỏ dùng chung instance selector.

    Giải pháp, sử dụng useMemo

    Và bây giờ mỗi instance của CarDetails sẽ có một instance của selector khác nhau

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo