Thảo luận về cách hoạt động của ứng dụng Redux

Trong các bài học trước, chúng ta đã triển khai tất cả các thành phần cần thiết cho ứng dụng Redux hoạt động. Hãy tổng kết và đi nhanh qua các giai đoạn chính trong cách hoạt động của ứng dụng với các sản phẩm của chúng ta.

Khi khởi chạy lần đầu, ứng dụng của chúng ta lấy từ store một danh sách gồm hai sản phẩm bằng cách sử dụng useSelector và hiển thị chúng trên màn hình. Trên màn hình cũng hiển thị một biểu mẫu, nơi chúng ta có thể nhập dữ liệu của sản phẩm mới. Khi người dùng nhấn nút lưu, trình xử lý sự kiện của nút sẽ gửi đi action productAdded, chứa dữ liệu sản phẩm mới mà người dùng đã nhập vào biểu mẫu. Hàm reducer mà chúng ta đã viết cho slice sản phẩm, nhận action này và thêm một đối tượng sản phẩm mới vào mảng sản phẩm. Store thông báo cho các component rằng dữ liệu state được lưu trữ đã bị thay đổi. Component ProductsList của chúng ta đọc mảng đã được thay đổi, kích hoạt quá trình render, kết quả là chúng ta thấy sản phẩm đã được thêm vào trong danh sách sản phẩm.

Bây giờ hãy mở Redux DevTools trong trình duyệt và thêm một sản phẩm nữa trong ứng dụng, sau đó xem tab Log monitor, ở đây chúng ta có thể thấy state của chúng ta khi khởi động ứng dụng, và sau đó, sau khi nhấn nút lưu, một action đã xuất hiện. Chúng ta có thể thấy thuộc tính payload của nó và những thay đổi trong global state.

Trong chương tiếp theo, chúng ta sẽ làm việc kỹ lưỡng hơn với dữ liệu trong ứng dụng Redux của mình.