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.

Redux DevTools is a browser extension that records the entire action history as a timeline — each action is logged with its payload, previous state, and next state diff.

Time-travel mechanism: DevTools saves a state snapshot after each action; you can 'jump' to any snapshot by clicking an action in the history list, and the app re-renders to exactly that state without needing to reload or manually reproduce the bug.

Key features:

1. Action log with type filter,
2. State diff with color-coded changes,
3. Replay — re-run all actions from the start,
4. Skip action — remove a specific action to test what-if scenarios,
5. Import/export state JSON for sharing bug reproductions,
6. Dispatcher panel to manually dispatch actions

Real-world workflow: user reports a bug at checkout → export their session state JSON → import into developer's DevTools → step through each action to pinpoint exactly where the bug occurred.

Important requirement: all state and action payloads MUST be serializable — no Dates, Functions, Promises, or class instances.

Violations cause DevTools to crash.

RTK includes a serializability check in development mode to warn immediately about non-serializable data.