This is an experimental feature. It must be enabled in your Experimental Settings to use.
Check out a video demo of the integration from our weekly Office Hours stream:
Overview
Redux DevTools in Replay is similar to the functionality of Redux DevTools in other browser developer tools. You can view the documentation for the library here for details on how to use.
Once enabled, the Replay Redux DevTools integration will show dispatched actions up to the point in time you are paused in the replay.
There are some caveats to the current Replay version:
- Reset, Revert, Commit, Test, and Skip/Jump functionality does not apply, and clicking these items will not work as expected
- The Redux DevTools already has a limit of 50 max actions shown by default, so if more were dispatched up to that point, the earliest ones won't be visible
- We intend to replace this v0.5 implementation with a new "v1" UI that matches our existing components such as the Network Monitor tab, and has tighter integration (showing the red line where paused, stack traces that jump to the right line, etc.). However, there will be a button to pop out the existing Redux DevTools UI in a new tab, similar to how the SourceMap Explorer works
Getting Started
- Make a recording with Replay of an application that uses Redux
- Other libraries that work with Redux DevTools, such as NgRX, Zustand, or Jotai are also supported
- Enable Redux DevTools in your Experimental Settings
- There should not be a Redux tab visible in the Console
- Jump to a point in time in the replay
- Once the pause loads, the Redux DevTools integration will show actions up to that point in time
You can use the Inspector, Log Monitor, and Chart to dive into actions, state, diffs, and more.