Tại sao lại là Redux?

Việc chuyển trạng thái giữa các thành phần khá lộn xộn trong React vì khó theo dõi dữ liệu đến từ thành phần nào. Sẽ thực sự phức tạp nếu người dùng đang làm việc với nhiều trạng thái trong một ứng dụng.

Redux giải quyết vấn đề chuyển trạng thái bằng cách lưu trữ tất cả các trạng thái ở một nơi duy nhất gọi là cửa hàng. Vì vậy, việc quản lý và chuyển trạng thái trở nên dễ dàng hơn vì tất cả các trạng thái đều được lưu trữ trong cùng một cửa hàng tiện lợi. Sau đó, mọi thành phần trong ứng dụng có thể truy cập trực tiếp vào trạng thái được yêu cầu từ cửa hàng đó.

Cũng đọc: 10 lý do hàng đầu để học JavaScript

Redux là gì?

Redux là một bộ chứa trạng thái có thể dự đoán được cho các ứng dụng JavaScript. Nó giúp bạn 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 (máy khách, máy chủ và môi trường gốc) và dễ kiểm tra. Redux quản lý trạng thái của ứng dụng bằng một đối tượng toàn cục duy nhất có tên là Store.

	Redux là một công cụ quản lý trạng thái
	Redux có thể được sử dụng với bất kỳ khung hoặc thư viện JavaScript nào
	Redux lưu trữ trạng thái của ứng dụng và các thành phần có thể truy cập trạng thái từ cửa hàng trạng thái

Nguyên tắc của Redux

Ba nguyên tắc Redux quan trọng nhất là:

• Nguồn sự thật duy nhất 

Trạng thái của toàn bộ ứng dụng của bạn được lưu trữ trong cây đối tượng trong một cửa hàng duy nhất.

Một cây trạng thái giúp việc gỡ lỗi hoặc kiểm tra ứng dụng trở nên dễ dàng hơn Nó mang lại cho bạn chu kỳ phát triển nhanh hơn bằng cách cho phép bạn duy trì trạng thái điều hướng của ứng dụng

• Trạng thái chỉ đọc

Cách duy nhất để thay đổi trạng thái là bắt đầu một hành động, một đối tượng mô tả những gì đã xảy ra.

Tính năng này đảm bảo rằng không có sự kiện nào như lượt gọi lại hoặc lượt xem mạng có thể thay đổi trạng thái. Họ chỉ có thể bày tỏ ý định thay đổi trạng thái Hành động chỉ là những đối tượng đơn giản; chúng có thể được ghi lại, tuần tự hóa, lưu trữ và sau đó được phát lại cho mục đích gỡ lỗi hoặc thử nghiệm

• Các thay đổi được thực hiện bằng các hàm thuần túy

Để chỉ định cách các hành động biến đổi cây trạng thái, bạn cần viết các bộ giảm tốc thuần túy.

Người dùng có thể trả về các đối tượng trạng thái mới thay vì thay đổi trạng thái trước đó Người dùng có thể bắt đầu với một bộ giảm tốc duy nhất và khi ứng dụng phát triển, có thể chia nó thành các bộ giảm tốc nhỏ hơn để quản lý các phần cụ thể của cây trạng thái Bởi vì các bộ giảm tốc chỉ là các chức năng nên thật dễ dàng để kiểm soát thứ tự chúng được gọi, truyền dữ liệu bổ sung hoặc thậm chí tạo các bộ giảm tốc có thể tái sử dụng

Chuẩn bị tinh thần để trả lời tất cả các câu hỏi!

Chương trình thạc sĩ kiểm thử tự động hóaKHÁM PHÁ CHƯƠNG TRÌNH

Trụ cột của Redux

Đây là những trụ cột chính của Redux:

• Cửa hàng

Cửa hàng là một đối tượng chứa cây trạng thái của ứng dụng. Chỉ nên có một cửa hàng duy nhất trong ứng dụng Redux vì quá trình kết hợp diễn ra ở cấp độ rút gọn.

getState() trả về trạng thái hiện tại của cửa hàng.

Dispatch() gửi một hành động. Đó là cách duy nhất để cập nhật trạng thái ứng dụng.

subscribe() đăng ký một trình lắng nghe thay đổi trạng thái.

unsubscribe() rất hữu ích khi bạn không còn muốn gọi phương thức nghe của mình khi trạng thái thay đổi.

• Hoạt động

Một hành động là một đối tượng đơn giản thể hiện ý định thay đổi trạng thái. Họ phải có một thuộc tính để chỉ ra loại hành động sẽ được thực hiện.

• Hành động là tải trọng thông tin gửi dữ liệu từ ứng dụng đến cửa hàng của bạn.
• Bất kỳ dữ liệu nào, cho dù từ các sự kiện giao diện người dùng hay lệnh gọi lại mạng, cuối cùng đều cần được gửi đi dưới dạng hành động.
• Hành động phải có trường loại, cho biết loại hành động đang được thực hiện.

• Bộ giảm tốc

Bộ giảm tốc là các hàm thuần túy chỉ định cách trạng thái của ứng dụng thay đổi để phản hồi các hành động được gửi đến cửa hàng.

• Các hành động chỉ mô tả những gì đã xảy ra chứ không phải trạng thái của ứng dụng thay đổi như thế nào.
• Bộ giảm tốc là một hàm chấp nhận trạng thái và hành động hiện tại, đồng thời trả về trạng thái mới với hành động được thực hiện.
• Tiện ích CombineReducers() có thể được sử dụng để kết hợp tất cả các bộ giảm tốc trong ứng dụng thành một bộ giảm chỉ mục duy nhất giúp việc bảo trì dễ dàng hơn nhiều.

Tìm hiểu hơn 15 công cụ và kỹ năng theo yêu cầu!

Chương trình thạc sĩ kiểm thử tự động hóaKHÁM PHÁ CHƯƠNG TRÌNH

Ưu và nhược điểm của Redux

Ưu điểm

	Luôn có một nguồn của sự thật, đó là cửa hàng. Do đó, không có sự nhầm lẫn về cách đồng bộ hóa trạng thái hiện tại với các hành động và các phần khác của ứng dụng.
	Mã dễ bảo trì hơn vì nó có kết quả có thể dự đoán được và cấu trúc chặt chẽ.
	Redux làm cho việc mã hóa trở nên nhất quán hơn do quy trình tổ chức mã nghiêm ngặt hơn
	Nó rất hữu ích, đặc biệt là trong quá trình hiển thị ban đầu, giúp mang lại trải nghiệm người dùng và tối ưu hóa công cụ tìm kiếm tốt hơn.
	Nhà phát triển có thể theo dõi mọi thứ đang diễn ra trong ứng dụng theo thời gian thực—từ hành động đến thay đổi trạng thái

Nhược điểm

	Vì không có tính năng đóng gói nên bất kỳ thành phần nào cũng có thể truy cập dữ liệu, điều này có thể gây ra sự cố bảo mật
	Một số phần của mã chỉ là bản soạn sẵn. Tuy nhiên, những bộ phận này phải được kết hợp mà không được thay đổi và điều này hạn chế việc thiết kế
	Vì trạng thái là bất biến trong Redux nên bộ giảm tốc sẽ cập nhật trạng thái bằng cách trả về trạng thái mới mỗi lần, điều này có thể gây ra việc sử dụng quá nhiều bộ nhớ

Ứng dụng demo: Phản ứng với Redux

Trong bản demo này, chúng tôi sẽ tạo một ứng dụng web theo hai cách:

1. Ứng dụng web không có Redux (Làm việc bình thường với việc sử dụng các đối tượng State)
2. Ứng dụng web với Redux (Sử dụng Store và bộ giảm tốc)

Mục tiêu của ứng dụng này là hiển thị nút đăng ký cùng với thông báo “Đăng ký Simplilearn”. Sau khi người dùng nhấp vào nút, thông báo sẽ chuyển thành “Cảm ơn bạn đã đăng ký”. Vì vậy, trước tiên hãy bắt đầu bằng cách xây dựng ứng dụng mà không cần Redux. Sau này, chúng ta sẽ xem xét việc triển khai Redux. Khi chúng ta thực hiện cả hai thiết kế, hãy lưu ý những điểm khác biệt.

Source: https://www.simplilearn.com/tutorials/reactjs-tutorial/react-with-redux