So sánh khác biệt giữa React Hook và Redux Hook

Dân công nghệ thông tin không còn xa lạ gì với những thuật ngữ React Hook và Redux Hook. Tuy nhiên nhiều người vẫn không thể giải thích chúng là gì, sự khác nhau của chúng và vì sao chúng thường xuyên đi đôi với nhau. Hãy cùng GrowUpWork tìm hiểu về thư viện JavaScript Redux Hook và so sánh sự khác biệt với React Hook nhé!

Tại sao cần một công cụ quản lý trạng thái trong React?

Trong React điển hình, cách xử lý dữ liệu giữa các thành phần bị ngắt kết nối là thông qua việc khoan lỗ. Vì không có trạng thái toàn cục nào mà các thành phần có thể truy cập. 

Ví dụ: nếu bạn muốn chuyển dữ liệu từ thành phần cấp cao nhất sang thành phần cấp năm, bạn sẽ phải chuyển dữ liệu làm chỗ dựa trên mỗi cấp của cây cho đến khi bạn nhận được thành phần mong muốn của bạn.

Điều này dẫn đến việc viết rất nhiều mã bổ sung và cung cấp các thuộc tính cho các thành phần mà chúng sẽ không bao giờ sử dụng cũng ảnh hưởng đến thiết kế kiến ​​trúc của chúng.

Để giải quyết vấn đề này, người dùng cần một cách để cung cấp trạng thái toàn cục mà tất cả các thành phần đều có thể truy cập, bất kể chúng được lồng sâu đến mức nào. Bằng cách giải quyết vấn đề này, Redux Hook - một thư viện JavaScript mã nguồn mở để quản lý trạng thái ứng dụng. Nó đã trở thành giải pháp phù hợp cho các nhà phát triển React.

Tại sao nên chuyển sang React Hook and Context

Ở một mức độ nào đó, Redux Hook hoạt động để quản lý trạng thái ứng dụng React và có một số ưu điểm. Nhưng tính chi tiết của nó khiến nó thực sự khó chọn và rất nhiều mã bổ sung cần thiết để làm cho nó hoạt động trong ứng dụng. Việc này dẫn đến rất nhiều phức tạp không cần thiết.

Mặt khác, với API useContext và React Hooks, không cần cài đặt các thư viện JavaScript bên ngoài hoặc thêm một loạt các tệp và thư mục để ứng dụng hoạt động. Điều này làm cho nó trở thành một cách đơn giản hơn, dễ dàng hơn để xử lý quản lý trạng thái ứng dụng toàn cầu trong React.

Ở phần dưới đây, chúng ta sẽ xem xét kỹ hơn Redux Hook, React Hook và API để xem chúng hoạt động như thế nào, những thách thức mà nhà phát triển phải đối mặt khi sử dụng các công cụ này cũng như cách sử dụng React Hooks và Context có thể giúp bạn khắc phục các sự cố thường gặp liên quan đến Redux Hook.

Redux Hook là gì?

Tài liệu Redux Hook mô tả nó như một vùng chứa trạng thái có thể dự đoán được cho các ứng dụng JavaScript giúp chúng ta viết các ứng dụng hoạt động nhất quán, chạy trong các môi trường khác nhau và dễ kiểm tra.

Một nhược điểm của Redux Hook là viết một lượng lớn mã bổ sung để truy cập dữ liệu từ một thành phần cấp cao nhất.

Với Redux Hook, nhược điểm này trở nên nghiêm trọng hơn vì tất cả các mã bổ sung mà nó yêu cầu để thiết lập trạng thái toàn cục thậm chí còn phức tạp hơn. Redux Hook yêu cầu ba phần xây dựng chính để hoạt động: hành động, bộ giảm tốc và lưu trữ.

Hành động

Những đối tượng được sử dụng để gửi dữ liệu đến lưu trữ Redux Hook. Chúng thường có hai thuộc tính: thuộc tính type để mô tả hành động thực hiện và thuộc tính payload chứa thông tin cần được thay đổi trong trạng thái ứng dụng.

Loại này thường được viết hoa toàn bộ với các từ được phân tách bằng dấu gạch dưới. Ví dụ: SIGNUP_USER hoặc DELETE_USER_DATA.

Bộ giảm tốc

Đây là những chức năng thuần túy thực hiện hành vi hành động. Chúng có trạng thái ứng dụng hiện tại, thực hiện một hành động và sau đó trả về trạng thái mới.

Lưu trữ

Lưu trữ là nơi chứa trạng thái của ứng dụng. Chỉ có một cửa hàng trong bất kỳ ứng dụng Redux Hook nào. 

Vì ứng dụng chỉ có thể có một cửa hàng Redux Hook, nên để tạo một công cụ rút gọn gốc duy nhất cho tất cả các thành phần sẽ cần phương thức connect Reducers từ Redux Hook.

Với quá trình dài và số lượng mã đáng kể cần thiết để thiết lập Redux Hook, hãy tưởng tượng codebase của chúng ta sẽ như thế nào khi chúng ta có nhiều thành phần để làm việc cùng.

Mặc dù Redux Hook giải quyết được vấn đề quản lý trạng thái ứng dụng, nhưng nó thực sự tốn thời gian để sử dụng, khó để học hỏi và giới thiệu một lớp phức tạp hoàn toàn mới cho ứng dụng.

May mắn thay, API của React giải quyết được vấn đề này. Khi kết hợp với React Hooks,một giải pháp quản lý trạng thái ứng dụng được ra đời với đặc điểm ít tốn thời gian hơn để thiết lập, dễ sử dụng và yêu cầu mã bổ sung tối thiểu.

React Context API là gì?

API Context mới đi kèm với React 16.3. React Context cho phép bạn chia sẻ dữ liệu có thể được coi là "toàn cầu" cho một cây các thành phần React, chẳng hạn như người dùng, chủ đề hoặc ngôn ngữ ưa thích hiện tại đã được xác thực.

Ngữ cảnh cung cấp một cách để chuyển dữ liệu trực tiếp mà không cần phải chuyển các đạo cụ xuống theo cách thủ công ở mọi cấp độ.

React Context API là cách React quản lý trạng thái ứng dụng trong nhiều thành phần không được kết nối trực tiếp.

Thành phần Trình cung cấp là thành phần làm cho trạng thái khả dụng cho tất cả các thành phần con, bất kể chúng được lồng sâu như thế nào trong hệ thống phân cấp thành phần. Thành phần Nhà cung cấp nhận được giá trị hỗ trợ. 

Nếu không có Hooks, API Context có thể không giống lắm khi so sánh với Redux Hook, nhưng kết hợp với useReducer Hook, có một giải pháp cuối cùng giải quyết được vấn đề quản lý trạng thái ứng dụng.

React Hooks là gì?

Hooks là một loại hàm cho phép thực thi mã tùy chỉnh trong mã cơ sở. Trong React, Hooks là các chức năng đặc biệt cho phép chúng ta “kết nối” các tính năng cốt lõi của nó.

React Hooks cung cấp một giải pháp thay thế cho việc viết các thành phần dựa trên lớp bằng cách cho phép người dùng dễ dàng xử lý việc quản lý trạng thái từ các thành phần chức năng.

useContext Hook

Khi giải thích API ngữ cảnh của React, người dùng cần bao bọc nội dung của mình trong thành phần Người tiêu dùng và sau đó chuyển một hàm khi còn nhỏ để có thể truy cập (hoặc sử dụng) trạng thái của mình.
Điều này giới thiệu lồng ghép các thành phần không cần thiết và làm tăng độ phức tạp của mã.

UseContext Hook làm cho mọi thứ đẹp hơn và đơn giản hơn rất nhiều. Để truy cập trạng thái của chúng ta với nó, tất cả những gì chúng ta cần làm là gọi nó với ngữ cảnh đã tạo của chúng ta làm đối số của nó.

Thay vì gói nội dung trong thành phần Người tiêu dùng, người dùng có thể chỉ cần truy cập trạng thái của mình thông qua biến giá trị.

useReducer Hook

UseReducer Hook đi kèm với React 16.8. Cũng giống như phương thức Reduce () trong JavaScript, useReducer Hook nhận hai giá trị làm đối số của nó. Một hàm giảm thiểu và một trạng thái ban đầu - và sau đó trả về một trạng thái mới.

Khi sử dụng phương thức điều phối, useReducer () Hook sẽ thực hiện một hành động dựa trên kiểu mà phương thức nhận được trong đối số hành động của nó.

Cách sử dụng useReducer Hook với React Context

Dưới đây là cách sử dụng useReducer Hook với React Contect hiệu quả:

Thiết lập store

Trong tệp store.js, phương thức createContext () từ React được sử dụng để tạo một ngữ cảnh mới.

Hãy nhớ rằng phương thức createContext () trả về một đối tượng có thành phần Nhà cung cấp và Người tiêu dùng. 

Lưu ý khi chúng ta cần thao tác trạng thái của mình, chúng ta sẽ gọi phương thức điều phối và truyền vào một đối tượng có kiểu mong muốn làm đối số của nó.

Trong StateProvider đã trả lại thành phần Provider với một giá trị hỗ trợ trạng thái và điều phối từ useReducer Hook.

Truy cập trạng thái trên toàn cầu

Để truy cập trạng thái trên toàn cầu, người dùng sẽ cần bọc thành phần App gốc của mình trong StoreProvider trước khi hiển thị nó trong hàm ReactDOM.render ().

Hiện nay, API Context có thể được truy cập từ bất kỳ thành phần nào trong cây thành phần. Để thực hiện việc này, người dùng sẽ nhập useContext Hook từ react và store từ tệp ./store.js.

Thêm và xóa dữ liệu khỏi trạng thái

Để thêm và xóa dữ liệu khỏi trạng thái ứng dụng, cần phương thức điều phối từ ngữ cảnh cửa hàng. Điều cần thiết ở đây là phương thức điều phối và truyền vào một đối tượng có kiểu (mô tả hành động như được định nghĩa trong thành phần StateProvider của chúng ta) làm tham số của nó:

Khả năng hiển thị đầy đủ về các ứng dụng React sản xuất

Gỡ lỗi các ứng dụng React có thể khó khăn, đặc biệt là khi người dùng gặp phải các vấn đề khó tái tạo. Nếu bạn quan tâm đến việc giám sát và theo dõi trạng thái Redux Hook, tự động hiển thị lỗi JavaScript và theo dõi các yêu cầu mạng chậm và thời gian tải thành phần, hãy thử LogRocket.

LogRocket giống như một DVR cho các ứng dụng web, ghi lại mọi thứ diễn ra trên ứng dụng React của bạn theo đúng nghĩa đen. Thay vì đoán lý do tại sao sự cố xảy ra, bạn có thể tổng hợp và báo cáo về trạng thái ứng dụng của bạn đang ở trạng thái nào khi sự cố xảy ra.

LogRocket cũng theo dõi hiệu suất ứng dụng của bạn, báo cáo với các chỉ số như tải CPU của máy khách, mức sử dụng bộ nhớ máy khách, v.v.

Gói phần mềm trung gian LogRocket Redux Hook thêm một lớp khả năng hiển thị bổ sung vào các phiên người dùng của bạn. LogRocket ghi lại tất cả các hành động và trạng thái từ các cửa hàng Redux Hook của bạn.

Kết luận

Trên đây GrowUpWork đã cung cấp một số thông tin so sánh về React Hook và Redux Hook. Hy vọng bạn đọc sẽ tìm được quản lý trạng thái ứng dụng phù hợp và cách sử dụng Redux Hook đúng cách. Chúc các bạn thành công!