ReactJS nâng cao: Thực tiễn tốt nhất cho React + Redux + Sagas

cà phê cho suy nghĩ

Trước tiên, giới thiệu nhanh về React là gì. Nó là một thư viện JavaScript được sử dụng để xây dựng giao diện người dùng. Nó đã thay đổi cảnh quan phát triển front-end kể từ khi nó xuất hiện. Vì vậy, nếu bạn đang khao khát trở thành một thư viện học tập dành cho nhà phát triển web hàng đầu như React hoặc Vue.js là điều gần như cần thiết trong ngành công nghiệp ngày nay. Đây là một hướng dẫn tuyệt vời nếu bạn chỉ bắt đầu học React. https://reactjs.org/tutorial/tutorial.html.

Tôi nhớ khi tôi bắt đầu học React. Tôi luôn có cảm giác lo lắng rằng tôi không bao giờ có thể học mọi thứ tôi cần, ngôn ngữ JavaScript luôn thay đổi xuất hiện trong đầu tôi và nếu tôi có làm gì đó đúng, tôi sẽ luôn tự hỏi mình, đó có phải là cách tốt nhất để làm điều đó? Sau hàng trăm hướng dẫn trực tuyến, tìm kiếm trên Youtube và tách cà phê chưa hoàn thành (và rất có thể chưa được pha chế), cuối cùng tôi đã nắm chắc những gì React cố gắng mang vào bảng JavaScript.

Tuy nhiên, tôi đã luôn phải vật lộn để tìm một hướng dẫn kết hợp tất cả các khái niệm nâng cao của React thành một hướng dẫn nhỏ gọn.

Ngoài ra, tôi nhớ có một thời gian khó hiểu các khái niệm này khi chúng được sử dụng bên trong một mã nguồn lớn. Đó là khoảng trống mà bài viết này đang cố gắng lấp đầy. Các công cụ và khái niệm nâng cao được nhúng vào ứng dụng đơn giản của chúng tôi, điều này chỉ dành cho mục đích hướng dẫn và bạn không nên sử dụng các khái niệm này nếu ứng dụng của bạn không cần chúng.

Đủ trò chuyện với chit. Hãy để mã nói chuyện. Tải về mã hoàn thành từ repo này và làm theo README để bạn có thể xem và cảm nhận những gì chúng tôi sẽ xây dựng ở đây. https://github.com/j Bachelorivera08/react-starter-pack.

Trang đích của ứng dụng

Ở trên, bạn có thể thấy trạng thái đếm được hiển thị và bốn nút kích hoạt các hành động tương ứng của chúng. Hành động của họ là tự giải thích.

bộ chọn

Hướng đến tệp selector.js bên trong bộ chứa Counter, khái niệm nâng cao đầu tiên chúng tôi đang giải quyết ở đây là createSelector. Bằng cách xem mã, đầu tiên, biến const const tìm nạp trạng thái đếm bên trong cây trạng thái redux bằng cách sử dụng state.get (‘Count,).

Sau đó, chúng tôi tạo một bộ chọn bằng phương thức đã nói. Điều này giúp chúng tôi định dạng trạng thái / dữ liệu mà chúng tôi nhận được từ cây trạng thái redux và bằng cách này, chúng tôi tiết kiệm rất nhiều thời gian để mã hóa các hàm mới xử lý tái cấu trúc trạng thái hoặc định dạng trạng thái đích mỗi khi chúng tôi cần nó để hiển thị ở phía trước -kết thúc. Trong ví dụ này, tôi đã làm thay đổi trạng thái mà tôi nhận được. Tôi chỉ trả lại trạng thái đơn giản cho mục đích demo.

Sau đó, hàm kết quả sẽ được sử dụng bên trong mapStateToProps và với mapStateToProps, điều tiếp theo cần cấu hình là mapDispatchToProps.

tạo ra hành động

Bất cứ khi nào gửi các hành động giảm tốc, chúng ta luôn phải khai báo loại của nó và trường hợp chuyển đổi tương ứng với một bộ giảm tốc mà nó sẽ nhập sau để thay đổi trạng thái ứng dụng. Với gói createActions từ reduxsauce, chúng ta có thể đánh hai con chim bằng một viên đá. Chúng ta cũng nên định dạng bộ giảm tốc với reduxsauce để hưởng lợi hoàn toàn từ gói này.

hộp giảm tốc

Trên đây là bộ giảm tốc ứng dụng của chúng tôi. Trạng thái ban đầu được bao quanh bởi API fromJS khỏi bất biến và khi tên gói được áp dụng, nó bảo vệ trạng thái ban đầu khỏi bị đột biến. React rất nghiêm khắc với khái niệm này vì vậy hãy luôn ghi nhớ điều này. API createReducer từ reduxsauce có hai đối số.

Đầu tiên, trạng thái ban đầu. Thứ hai, đối tượng có các khóa cho các loại hành động và giá trị là một hàm mà bộ giảm tốc sẽ kích hoạt khi một loại khớp với lệnh gọi công văn. Hợp nhất, sau đó, thay đổi cây trạng thái redux cho phù hợp. Có một ứng dụng ngoài đời thực mà không biết cách xử lý các cuộc gọi API không đồng bộ phải không? Đúng.

câu chuyện Redux

Đây là phần saga của chương trình của chúng tôi. Mọi thứ đều giống nhau ngoại trừ cách chúng ta gọi hành động của mình. Chúng tôi sử dụng hành động loại mà chúng tôi đã tạo trước đó và sử dụng chúng trong câu chuyện của người theo dõi để gửi các cuộc gọi không đồng bộ mà sau này sẽ ảnh hưởng đến cây trạng thái redux của chúng tôi.

Sự chậm trễ là có để giả định độ trễ mạng cho cảm giác không đồng bộ tốt hơn của ứng dụng. Ồ, và cuối cùng, hãy để Hãy chắc chắn rằng chúng ta đừng quên về hiệu suất.

tách mã

Chia tách mã là một cách tuyệt vời để cải thiện hiệu suất ứng dụng web. Mã JavaScript chiếm phần lớn số liệu trên dữ liệu của người dùng. Hãy nhớ rằng, với việc tách mã, nó cho phép người dùng cuối tải xuống chỉ một phần mã cần thiết cho hiệu quả tiêu thụ dữ liệu.

Túm cái vạy lại là,

Có rất nhiều gói và công cụ hiện có giúp chúng tôi, các kỹ sư phần mềm tạo ra một mã sạch hơn và mã hiệu quả hơn nhiều. đi kèm với một chi phí, chi phí để hiểu hệ thống cơ bản và đó là suy nghĩ trong React.

Learning React yêu cầu bạn thay đổi mô hình mã hóa của mình thành một mô hình khác biệt hơn nhiều so với tập hợp mã hóa trước đó ở phần đầu. Các công cụ và gói mà tôi đã thảo luận trong bài viết này gói gọn những nguyên tắc cần thiết để mã hóa đẹp mắt và hiệu quả trong React và điều đó tạo nên một nhà phát triển đặc biệt.

Nó luôn luôn là những điều nhỏ nhặt.

Với điều đó, tôi hy vọng tôi đã giúp bạn hiểu hơn về React với bài viết nhỏ này. Chúc mừng!