React useReducer Guides - Những thông tin cần biết

useReducer cho phép logic trạng thái tùy chỉnh.

Đây là tập hợp các hướng dẫn hàng đầu và thịnh hành được viết bởi cộng đồng về các chủ đề liên quan đến khái niệm React useReducer . Đối với tất cả mọi thứ về React, hãy xem thẻ React ! Vui lòng đóng góp nhiều bài viết như thế này để giúp đỡ các nhà phát triển đồng nghiệp của bạn đang cần.

Bối cảnh phản ứng với useReducer và Typescript.

Hàm rút gọn nhận hai đối số, đối số đầu tiên là trạng thái mà chúng ta sẽ chuyển khi sử dụng useReducerhook và đối số thứ hai là một đối tượng đại diện cho các sự kiện đó và một số dữ liệu sẽ thay đổi trạng thái (hành động).

Sử dụng useReducer Hook trong React với TypeScript

Móc useReducer là một thay thế cho móc useState và thích hợp hơn khi bạn có logic trạng thái phức tạp hoặc khi trạng thái tiếp theo của bạn phụ thuộc vào trạng thái trước đó của bạn.

Cặp đôi đẹp nhất: useContext + useReducer!

Đây sẽ là một trong những bài đăng hay nhất mà bạn từng gặp khi tìm kiếm các hook useContext + useReducer !

Phản ứng useContext và useReducer Hook.

Móc useReducer được sử dụng cho các thao tác trạng thái phức tạp và chuyển đổi trạng thái. … useReducer là một hàm hook React chấp nhận hàm giảm tốc và trạng thái ban đầu. const [state, công văn] = useReducer(reducer, initState); Hàm hook này trả về một mảng có 2 giá trị.

Cách sử dụng hook useReducer và useContext với Typescript trong React

Các thành phần của bạn có phức tạp với quá nhiều trạng thái và đạo cụ không?. đã đến lúc sử dụng các hook useReducer và useContext ngay bây giờ để làm cho chúng đơn giản và rõ ràng.

Làm cách nào để sử dụng hook useReducer để bắt chước phương thức setState?

Điều này hoạt động hoàn toàn tốt. Nhưng ... nếu bạn muốn sử dụng phiên bản ngắn gọn của this.setStatephương thức trong thành phần chức năng (hoặc chỉ để giải trí), bạn có thể sử dụng useReducerhook để làm điều đó.

2 trường hợp sử dụng hook useReducer ReactJS

useReducercó thể được sử dụng để đơn giản hóa cách thức mà nhiều trạng thái tác động đến một phần dữ liệu. Trong trường hợp này, việc thêm, xóa và xóa một mảng có thể đạt được bằng cách sử dụng useReducerthay vì ba trạng thái riêng biệt.

React: useReducer hook demo với các hộp chọn lồng nhau

Ở đây const [state, dispatch] = useReducer(reducer, initialState)tôi đang sử dụng useReducerhàm từ phản ứng để trả lại trạng thái hiện tại và phương thức gửi để kích hoạt các hành động.

Quản lý trạng thái phản ứng hoàn hảo: useReducer và Context API

Điều này cực kỳ hữu ích, chúng tôi đã thêm trạng thái toàn cầu vào ứng dụng của mình! Nhưng nếu chúng ta muốn cập nhật trạng thái đó thì sao? Đó là nơi mà useReducer xuất hiện.

Hiểu hook useReducer trong React

UseReducer là một trong những hook bổ sung đi kèm với React 16.8. Nó là một giải pháp thay thế cho useStatehook và giúp quản lý logic trạng thái phức tạp liên quan đến nhiều giá trị phụ hoặc khi trạng thái tiếp theo phụ thuộc vào trạng thái trước đó. Khi được kết hợp với useContextcác hook khác, nó có thể là một sự thay thế tốt cho redux.

Ngoài ra, useReducertính năng này cũng cho phép bạn tối ưu hóa hiệu suất cho các thành phần kích hoạt các bản cập nhật sâu vì bạn có thể chuyển công văn xuống thay vì gọi lại.

State, Reducers và useReducer trong React

Hàm useReducertrả về một bộ [state, dispatch]và nhận ba đối số , reducer, initialArgvà init. Lưu ý: initlà tùy chọn và được sử dụng để khởi tạo chậm - nhiều hơn về điều đó sau một phút.

Thêm nhật ký gỡ lỗi khi sử dụngReducer trong React

Một logger rất cơ bản cho useReducerchức năng trong API React Hooks . Lấy cảm hứng từ redux-logger .

Gỡ lỗi ReactJS Context và useReducer hook với React Context Devtool

React-context-devtool là devtool cho ngữ cảnh phản ứng và hook useReducer.

Thêm chế độ Tối vào ứng dụng React của bạn bằng API ngữ cảnh và móc useReducer

Quản lý trạng thái trong React có thể khá phức tạp. Các thư viện như Redux làm cho điều này trở nên dễ quản lý hơn vì chúng chỉ giữ một nguồn thông tin chính xác (cửa hàng) mà bạn tương tác. Tuy nhiên, trong nhiều trường hợp, điều này có thể quá phức tạp để thiết lập. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách sử dụng React Context API cùng với useReducer hook để tránh truyền props xuống theo cách thủ công.

Duy trì useReducer với React Hook tùy chỉnh

Tôi nhanh chóng biết được rằng đó useReducerlà một giải pháp thay thế có thẩm quyền cao cho Redux và việc nhập nó (thêm các loại bản thảo) đơn giản hơn nhiều so với Redux. Tuy nhiên, còn thiếu một thứ: Sự bền bỉ.

Giới thiệu về useReducer Hook của React

Chúng tôi đi sâu vào useReducer hook của React và xem cách chúng tôi có thể sử dụng nó để quản lý trạng thái phức tạp. Trước tiên, chúng tôi so sánh useState và useReducer và từ từ thêm chức năng rút gọn của chúng tôi để làm cho nó linh hoạt hơn.

Có thể bạn không cần Redux: Sử dụng React Context + useReducer hook

Dan đã nói như vậy từ năm 2016, và bây giờ chúng ta đã có React Context và useReducer hook, các trường hợp sử dụng redux là rất nhỏ. Trong bài đăng này, chúng tôi sẽ tạo một ví dụ danh sách việc cần làm cũ tốt bằng cách sử dụng Context và useReducer hook.

Sử dụng useReducer để quản lý trạng thái trong React 💪

Như chúng ta có thể thấy, chúng ta sử dụng bốn lần thành phần Comp1 . Vì vậy, chúng tôi cũng cần sử dụng useReducerbốn lần để mỗi phiên bản Comp1 có trạng thái riêng.

Bây giờ hãy xem định nghĩa state.js cho thành phần ứng dụng . Nó là như thế này:

useState vs useReducer vs XState - Phần 1: Phương thức

Tệp này yêu cầu cùng số lượng bộ tái cấu trúc khi useStatetriển khai. Một lợi thế quan trọng là các bộ tái cấu trúc này hầu hết được đặt cùng nhau: hầu hết các thay đổi xảy ra bên trong bộ giảm tốc và các trình xử lý sự kiện hầu như không bị ảnh hưởng. Đối với tôi, điều này mang lại useReducerlợi thế hơn useState.

Bạn nên sử dụngState hay sử dụngReducer 🤷? Không quan trọng thực sự. Giải thích trong 3 phút.

Tài liệu React khuyến nghị useReducerxử lý các giá trị trạng thái phức tạp. Nhưng đối với tôi họ đều mạnh mẽ như nhau. Hãy để tôi chỉ cho bạn cách làm.

Tạo Ứng dụng ghi chú dán bằng React useReducer Hook

React có một bộ sưu tập lớn các hook giúp các nhà phát triển dễ dàng truy cập các giá trị props vào các thành phần khác nhau. Trong ứng dụng này, hôm nay chúng ta sẽ cố gắng hiểu chức năng của hook useReducer của phản ứng.

Móc useReducer chỉ cần tạo một cửa hàng để theo dõi trạng thái ứng dụng, sau đó bạn có thể tạo các hành động được thực hiện (như thêm/xóa/cập nhật) và sau đó gọi các hành động đó bằng cách sử dụng phương thức gửi của móc useReducer.

Cách thức hoạt động của React Hook useReducer

Nhưng điều đó sẽ bắt đầu bị hỏng khi bạn có các đối tượng lồng nhau và chúng tôi muốn trở nên lạ mắt và giữ cho mã của chúng tôi chặt chẽ. Vì vậy, hãy nói về useReducer. Nếu bạn đã từng sử dụng React Redux, một số thứ chúng ta sắp làm có thể trông rất quen thuộc, nhưng nếu không, đừng lo lắng về điều đó. useReducer cực kỳ giống với việc sử dụng reduce trong Javascript thông thường cũ.