Trong bài viết trước “ Tìm hiểu về Bộ giảm tốc từ đầu ” tôi đã giới thiệu về Bộ giảm tốc như một khái niệm và mở rộng khái niệm đó để tạo ra một kiến ​​trúc ứng dụng đơn giản tương tự như Redux chỉ trong 50 dòng mã.

Hiểu về Giảm tốc từ đầu

Hôm nay tôi sẽ viết về Redux, một thư viện Javascript phổ biến đã phổ biến mẫu thiết kế Giảm tốc và đã trở thành một trong những kiến ​​trúc ứng dụng được sử dụng rộng rãi nhất hiện nay (2018).

Redux tự coi mình là nơi chứa trạng thái có thể dự đoán được cho các ứng dụng Javascript . Nhưng Redux không chỉ hỗ trợ quản lý nhà nước. Nó cũng giúp việc triển khai các tính năng nâng cao trở nên dễ dàng, chẳng hạn như thêm hoàn tác/làm lại, ghi/phát lại, chỉnh sửa trực tiếp và phối hợp nhiều người dùng vào ứng dụng của bạn.

Điều khiến Redux trở nên tuyệt vời là nó buộc chúng ta phải suy nghĩ theo một cách nhất định. Ngay lập tức chúng ta bắt đầu nghĩ về trạng thái ứng dụng.

Ba nguyên tắc cơ bản của mẫu Redux:

1. State Tree là một 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 biểu thị bằng một đối tượng Javascript, tức là Cây trạng thái
2. Cây trạng thái chỉ được đọc. Đối tượng trạng thái không thể được thao tác trực tiếp. Trạng thái được cập nhật bằng cách gửi đi các đối tượng hành động .
3. Các thay đổi được thực hiện bằng các hàm thuần túy. Cách duy nhất để một trạng thái thay đổi là sử dụng hàm giảm tốc thuần túy . Bộ giảm tốc lấy trạng thái hiện tại và đối tượng hành động được gửi đi; và trả về trạng thái đột biến, đó là trạng thái ứng dụng tiếp theo.

Trong ví dụ sau, tôi thiết lập một tiện ích đơn giản để minh họa hoạt động bên trong cơ chế quản lý trạng thái của Redux .

Tiện ích này có một hộp hình vuông, nơi hiển thị bộ đếm trạng thái. Ngoài ra, các nút “+ tăng” và “-giảm” để tăng hoặc giảm bộ đếm được giữ ở trạng thái. Trạng thái là một số đếm, ban đầu là 0.

Đây là các bước tôi đã thực hiện để tạo tiện ích.

Bước 1 , tạo hàm rút gọn , hàm này chịu trách nhiệm thay đổi trạng thái dựa trên đối tượng hành động được gửi đi [Dòng 3].

Đối tượng hành động là một đối tượng đơn giản có thuộc tính loại . Bộ giảm tốc sẽ kiểm tra điều đó và thực hiện đột biến trạng thái thích hợp [Dòng 7 & 11].

Bước 2 , tạo hàm kết xuất [Dòng 20], hàm này sẽ truy xuất bộ đếm trạng thái từ cửa hàng [Dòng 22] và điền nó vào hộp vuông [Dòng 25]. Bộ đếm trạng thái sẽ là kết quả của hàm rút gọn từ Bước 1 .

Bước 3 , tạo một cửa hàng Redux và liên kết chức năng giảm tốc . [Dòng 30].

Bước 4 , đăng ký chức năng kết xuất vào một cửa hàng . [Dòng 33]

Chúng tôi đã liên kết các chức năng giảm tốc và kết xuất với cửa hàng. Bây giờ đối tượng hành động sẽ chuyển vào bộ giảm tốc và sau đó trạng thái đột biến sẽ chuyển vào hàm kết xuất .

Bước 5 , Tạo tất cả các đối tượng trực quan, thêm chúng vào nội dung tài liệu và thiết lập các sự kiện nhấp chuột tăng giảm [ Dòng 56].

Bước 6 , Bây giờ, mỗi sự kiện nhấp chuột sẽ gửi một đối tượng hành động vào cửa hàng [Dòng 57 & 61].

Đây là sơ đồ chi tiết hơn về những gì xảy ra trong ứng dụng nhỏ này

Ngoài ra, bạn có thể thử nghiệm mẫu trên JSFiddle. Nhấp vào tab Kết quả .

Tóm lại, Redux là một thư viện rất đơn giản và hữu ích giúp chúng ta tổ chức luồng trạng thái ứng dụng của mình. Và tất cả những gì chúng tôi phải làm là tạo các hàm giảm tốc và kết xuất ; và liên kết chúng với một cửa hàng .

Hãy xem QQ khung nguồn mở của tôi:

https://github.com/jsmuster/qq

Kiểm tra các bài viết khác của tôi

Các tính năng tuyệt vời của ES6 bằng ví dụ Khám phá React với Javascript thuần túy - phần 1 Tìm hiểu về các trình vòng lặp… của Javascript