Để có thể quản lý trạng thái của ứng dụng khi sử dụng các dự án ứng dụng react hoặc single page, redux là một lựa chọn phù hợp. Vậy redux là gì? Nó hoạt động như thế nào và cấu trúc của nó là gì? Hãy cùng vietnix giải đáp qua bài viết dưới đây.
reux là gì?
redux là thư viện javascript tạo lớp quản lý tất cả trạng thái của ứng dụng. Nói cách khác, redux là công cụ quản lý trạng thái có thể dự đoán dành cho các ứng dụng được viết bằng ngôn ngữ lập trình javascript, còn được gọi là redux js.
Lưu ý: redux js là một thư viện javascript, redux js khác với redux framework (nó là một wordpress framework).
redux giúp bạn viết các ứng dụng hoạt động nhất quán và trên nhiều môi trường, máy khách, máy chủ, bản địa, v.v. Ngoài ra, việc sử dụng thư viện redux để lưu trữ cũng giúp quá trình test/kiểm thử phần mềm dễ dàng hơn.
Có thể nói redux là sự kết hợp hoàn hảo với react, bạn hoàn toàn có thể sử dụng thư viện này với backbone, angular, angular2, deku, falcor và các framework khác. Kích thước redux rất nhẹ, khoảng 2kb, vì vậy bạn không cần lo lắng về việc tăng kích thước ứng dụng.
lịch sử redux
Ngày càng có nhiều ứng dụng trang đơn sử dụng javascript có yêu cầu ngày càng phức tạp hơn, dẫn đến ngày càng có nhiều trạng thái mà hệ thống mã cần quản lý. Vào năm 2013, facebook đã thông báo rằng góc cạnh của google rất chậm và nặng. Để giải quyết vấn đề này, react ra đời.
Nhưng Reac không có khả năng quản lý trạng thái ứng dụng, nó chỉ là một thư viện để tạo các thành phần và hiển thị chúng trên giao diện. Tiếp đó, facebook cho ra mắt thư viện mới có tên là flux nhằm mục đích hỗ trợ cho react quản lý trạng thái của ứng dụng.
flux khó hiểu và không được nhiều người ủng hộ. Cũng trong thời gian này, dan abramov đã nghiên cứu hệ thống thư viện thông lượng của facebook và ngôn ngữ cây du. Ông nhận thấy rằng cây du và thông lượng có nhiều điểm tương đồng.
Vào tháng 5 năm 2015, dan abramov đã công bố một thư viện javascript mới có tên là redux kết hợp kiến trúc của cây du để loại bỏ sự lộn xộn và phức tạp của thông lượng. Redux cho đến nay vẫn được sử dụng rộng rãi hơn vì tính ứng dụng và đơn giản của nó.
Cách hoạt động của redux
Cách thức hoạt động của redux rất đơn giản, dựa trên 3 thành phần chính: action, store, reducers.
Hành động
Hành động, còn được gọi tắt là sự kiện, là bước đầu tiên trong luồng hoạt động redux và là cách dữ liệu được gửi từ ứng dụng đến kho lưu trữ redux. Một hành động được tạo bất cứ khi nào trạng thái của ứng dụng hoặc kết xuất của chế độ xem thay đổi. Dữ liệu mô tả hành động này đến từ tương tác của người dùng với ứng dụng, lệnh gọi api, gửi biểu mẫu, v.v.
Bộ giảm tốc
Sau khi tìm nạp dữ liệu, hành động sẽ chuyển sang bộ giảm tốc. Đây là nơi trạng thái được lưu giữ dưới dạng đối tượng và giúp xác định các thay đổi trong trạng thái ứng dụng để gửi phản hồi hành động đến cửa hàng. Bây giờ, mỗi khi một hành động có phản hồi, bộ giảm tốc sẽ thực hiện công việc chỉ đạo thay đổi trạng thái và gửi phản hồi tới bộ giảm tốc.
Nói một cách đơn giản, bộ rút gọn là một hàm nguyên thủy lấy trạng thái hiện tại của ứng dụng. Sau đó, chúng thực hiện một hành động và trả về một trạng thái hoàn toàn mới. Các trạng thái này sẽ được lưu trữ dưới dạng các đối tượng. Bởi vì chúng chỉ định trạng thái của ứng dụng thay đổi như thế nào và việc xác nhận các thay đổi trong phản hồi của hành động đối với cửa hàng sẽ dễ dàng hơn.
Cửa hàng
Cửa hàng là nơi lưu trữ trạng thái của ứng dụng và chỉ có một cửa hàng trong bất kỳ ứng dụng redux nào. Công việc chính của cửa hàng là quản lý và truy cập trạng thái được lưu trữ, cập nhật trạng thái thông qua công văn, cho phép truy cập trạng thái thông qua getstate và đăng ký hoặc hủy đăng ký người nghe thông qua các phương thức trợ giúp.
Trong redux, store đóng vai trò quan trọng nhất vì nó có chức năng và nhiệm vụ quan trọng. Bởi vì nếu không có phần tử điều phối nào được gửi đến bộ giảm tốc, hành động sẽ không được kích hoạt.
Cách hoạt động của redux
Quá trình redux build áp dụng 3 nguyên tắc hoạt động cơ bản như sau:
1. Sử dụng một nguồn sự thật duy nhất
Hoạt động của redux phụ thuộc vào nhiều nguồn dữ liệu khác nhau, chẳng hạn như từ máy chủ, hành động của người dùng, v.v. Việc có quá nhiều nguồn dữ liệu khiến các ứng dụng khó kiểm soát chúng.
Để giải quyết vấn đề này, redux đề xuất giải pháp xử lý và tổng hợp tất cả các nguồn dữ liệu thành một nguồn dữ liệu. Trạng thái hệ thống của toàn bộ ứng dụng được chứa trong một cây các đối tượng nằm trong một cửa hàng duy nhất.
2. Tạo trạng thái chỉ đọc
Cách duy nhất để người dùng có thể thay đổi trạng thái của ứng dụng là đưa ra một hành động, một đối tượng mô tả mọi thứ đã xảy ra. Trạng thái của redux chỉ là một đối tượng chỉ thay đổi khi các sự kiện xảy ra. Nếu không thì không được phép thay đổi “trực tiếp”.
3. chỉ được thay đổi bởi các hàm thuần túy
Để hiển thị trạng thái được chuyển đổi như thế nào bởi các hành động, người dùng sử dụng các hàm thuần túy được gọi là bộ giảm tốc. Với các hàm thuần túy, bạn có thể thay đổi trạng thái ứng dụng của mình. Cụ thể, dữ liệu của sự kiện và trạng thái hiện tại nhập vào sẽ được hàm xử lý và đưa về trạng thái tiếp theo.
Cấu trúc của redux là gì?
redux dựa trên kiến trúc của flux đã ra đời trước đó và lược bỏ đi sự phức tạp không cần thiết nên cấu trúc cơ bản của react redux chỉ có 4 thành phần như sau:
- hành động: Hiểu một cách đơn giản, đây là nơi lưu trữ và mang thông tin/dữ liệu từ nhiều nguồn khác nhau, có thể từ người dùng, máy chủ, cuộc gọi api, gửi biểu mẫu, ..gửi kho. Hệ thống dữ liệu này là một sự kiện mô tả đầy đủ những gì đã xảy ra, chẳng hạn như hành động của người dùng (nhấp chuột, sao chép, tải xuống, v.v.), thời gian hành động, địa điểm hành động…
- reducer: là một hàm thuần túy xác định cách trạng thái thay đổi và trả về trạng thái mới từ trạng thái ban đầu. Đó là, nếu hành động không mô tả rõ ràng trạng thái của phản hồi đã thay đổi và cách bộ giảm tốc sẽ xử lý điều đó. Các bộ giảm tốc xác định trạng thái hiện tại của ứng dụng thay đổi như thế nào để đáp ứng với dữ liệu hành động được gửi đến cửa hàng.
- store: là nơi quan trọng nhất để thực hiện các hành động được kích hoạt đã được thực hiện bằng phần tử bộ điều phối trước khi gửi chúng đến bộ giảm tốc. store cũng là chương trình duy nhất trong redux hỗ trợ lưu trữ và quản lý trạng thái, cho phép truy cập trạng thái thông qua getstate, cập nhật trạng thái thông qua công văn (hành động) và đăng ký người nghe thông qua đăng ký (người nghe). Cửa hàng cũng cho phép người dùng tiếp tục truy cập và can thiệp vào các chương trình được lưu trữ thông qua các phương thức hỗ trợ như cập nhật, đăng ký hoặc hủy bỏ.
- view: Nơi hiển thị dữ liệu do cửa hàng cung cấp.
Một số khái niệm liên quan đến redux
Redux thunk là gì?
redux thunk là một phần mềm trung gian cho phép trả về các chức năng, không chỉ các hành động trong redux. Một trong những ứng dụng chính của redux thunks là xử lý các hoạt động không đồng bộ, chẳng hạn như gửi yêu cầu nhận bằng axios.
redux vẫn tồn tại là gì?
reduxpersistent là một thư viện cho phép lưu trữ redux liên tục trong bộ nhớ cục bộ của ứng dụng. Sử dụng thư viện quản lý trạng thái như redux, người dùng có thể quản lý trạng thái ứng dụng của họ từ một nơi. Khi ứng dụng của bạn phát triển về chức năng, có thể cần duy trì một số thông tin cục bộ cho từng người dùng.
Ví dụ: giả sử chúng ta cần xây dựng ứng dụng giỏ hàng cho nền tảng mua sắm và ứng dụng cần duy trì dữ liệu liên quan đến sản phẩm mà người dùng thêm vào giỏ hàng trước khi đặt hàng. Nếu người dùng đóng ứng dụng trước khi đặt hàng, chúng ta nên thiết kế ứng dụng sao cho các sản phẩm trước đó vẫn có sẵn trong giỏ hàng của người dùng để có trải nghiệm tốt nhất. Trong trường hợp này, chúng tôi có thể lưu các sản phẩm này vào bộ nhớ cục bộ của người dùng. Đây là ứng dụng phổ biến nhất của redux vẫn tồn tại.
Ngoài ra, bằng cách sử dụng tính năng chuyển hướng liên tục, điều này có thể được thực hiện hoàn toàn tự động, chỉ yêu cầu một lượng nhỏ nhật ký cho quá trình khởi tạo. Từ đó, quá trình quản lý ứng dụng với redux trở nên dễ dàng và hiệu quả hơn rất nhiều.
Kết luận
Trong phạm vi bài viết này, vietnix chỉ giới thiệu đến các bạn những khái niệm cơ bản để giải thích redux là gì. Ngoài ra, còn có các nguyên tắc và chia sẻ nền tảng liên quan đến cách thức hoạt động của redux. Ở nội dung sau vietnix sẽ giải thích các vấn đề khác liên quan đến redux. Nếu có thêm thắc mắc, hãy để lại bình luận bên dưới để các chuyên gia giải đáp cho bạn.