Redux DevTools hoạt động như thế nào? Tính năng time-travel debugging là gì?

Redux DevTools là browser extension record toàn bộ action history theo timeline — mỗi action được log kèm payload, prev state và next state diff.

Time-travel mechanism: DevTools lưu snapshot state sau mỗi action; bạn có thể 'jump' đến bất kỳ snapshot bằng click vào action trong history list, app render lại đúng state tại thời điểm đó mà không cần reload hay reproduce thủ công.

Tính năng chính:

1. Action log với filter theo type,
2. State diff highlighting thay đổi màu xanh/đỏ,
3. Replay — chạy lại từng action từ đầu,
4. Skip action — loại bỏ action cụ thể để test what-if,
5. Import/export state JSON để share bug reproduction,
6. Dispatcher panel để dispatch action thủ công

Workflow thực tế: user báo bug ở màn hình checkout → export state JSON từ session của họ → import vào DevTools của developer → jump từng action để tìm chính xác điểm gây ra bug.

Yêu cầu quan trọng: state và action payload PHẢI serializable — không được là Date, Function, Promise hay class instance — vi phạm khiến DevTools crash.

RTK tích hợp sẵn serializability check ở development mode để cảnh báo ngay khi có non-serializable data.