Cách Redux hoạt động một cách đơn giản
Việc truyền dữ liệu giữa các React component thường giống như trò chơi truyền tin. Bạn truyền dữ liệu từ component cha xuống component con, rồi từ con xuống cháu. Điều này trở nên lộn xộn khi ứng dụng của bạn lớn dần lên.
Redux giải quyết vấn đề này. Nó tạo ra một "nguồn sự thật duy nhất" (single source of truth). Thay vì dữ liệu bị phân tán, mọi thứ đều nằm trong một kho lưu trữ trung tâm.
Hãy tưởng tượng một quán cà phê để hiểu về Redux.
The Store (Kho lưu trữ) Đây là sổ cái của quán. Nó theo dõi số lượng hạt cà phê, các đơn hàng và danh sách nhân viên.
The Action (Đơn hàng)
Khách hàng không tự lấy một ly latte từ quầy. Họ đặt một đơn hàng. Một action là một đối tượng (object) đơn giản mô tả điều gì đã xảy ra.
Ví dụ: { type: 'ADD_TODO', text: 'Buy Milk' }
The Reducer (Người pha chế) Người pha chế là người duy nhất cập nhật sổ cái. Họ tiếp nhận trạng thái hiện tại (current state) và đơn hàng mới, sau đó tạo ra một phiên bản mới của sổ cái.
The Dispatch (Thu ngân) Thu ngân nhận đơn hàng của bạn và đưa cho người pha chế. Dispatch là hàm gửi action của bạn đến store.
Tại sao nên dùng Redux?
Khi ứng dụng của bạn mở rộng để bao gồm hồ sơ người dùng hoặc giỏ hàng, một store trung tâm sẽ giúp việc gỡ lỗi (debugging) trở nên dễ dàng. Bạn có thể xem lại lịch sử action để biết khi nào và tại sao dữ liệu thay đổi. Nó hoạt động giống như một hộp đen ghi lại hành trình cho website của bạn.
Tóm tắt:
• Action: Một ghi chú mô tả sự thay đổi. • Reducer: Logic thực hiện sự thay đổi. • Dispatch: Trình kích hoạt gửi action đến logic.
Nguồn: https://dev.to/code_with_aravind/how-redux-works-in-simple-terms-1pkp