feat: implement state action items in timeline #49
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
joshuayoes
reviewed
Oct 6, 2025
Collaborator
joshuayoes
left a comment
There was a problem hiding this comment.
This is looking pretty good! I tested this using the example reactotron app and I'm seeing the actions coming through, but I'm not seeing the type property show up. Not a huge deal but I think we may want to figure that out.
Manual Test Steps
reactotron-macos setup
gh pr checkout 49npm installnpm run podnpm run startnpm run macosnode -e "require('./standalone-server').startReactotronServer({ port: 9292 })"
reactotron example app setup
yarn install
Add Reactotron standalone server port to example app configuration
diff --git a/apps/example-app/app/devtools/ReactotronConfig.ts b/apps/example-app/app/devtools/ReactotronConfig.ts
index a5c7d5b6..9b9c1dad 100644
--- a/apps/example-app/app/devtools/ReactotronConfig.ts
+++ b/apps/example-app/app/devtools/ReactotronConfig.ts
@@ -18,6 +18,7 @@ import { Reactotron } from "./ReactotronClient"
const reactotron = Reactotron.configure({
name: require("../../package.json").name,
+ port: 9292,
onConnect: () => {
/** since this file gets hot reloaded, let's clear the past logs every time we connect */
Reactotron.clear()
yarn workspace example-app start- Start on a different port to avoid conflicting with reactotron-macos
- Press
ito launch in iOS simulator - Consider
Cmd + Shift + Rto reload reactotron-macos to get connection - Tap "State Management: MST" in iOS Simulator
- Click "Reactotron" in iOS Simulator
- See "ACTION" timeline log in reactotron-macos
app/components/DetailPanel.tsx
Outdated
| return ( | ||
| <View style={$detailContent()}> | ||
| <DetailSection title="Type"> | ||
| <Text>{action.type}</Text> |
Collaborator
There was a problem hiding this comment.
request: in my testing using the reactotron example app, I'm not seeing the type string come through 🤔
Screen.Recording.2025-10-06.at.12.29.49.PM.mov
joshuayoes
approved these changes
Oct 6, 2025
Collaborator
joshuayoes
left a comment
There was a problem hiding this comment.
Looks good!
Screen.Recording.2025-10-06.at.4.23.19.PM.mov
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
This PR implements support for displaying Redux state action items in the Reactotron timeline, providing developers with better visibility into state management actions.
Changes Made
New Components
Updated Components
Type System Updates
TimelineItemStateActionCompletetype definitionTimelineItemunion type to include state action itemsStateActionCompletePayloadfrom reactotron-core-contractFeatures
✅ Timeline Integration: State action items now appear in the timeline alongside logs, network requests, and display items
✅ Detail Panel Support: Clicking on a state action item shows detailed information including:
✅ Filtering: State action items are included in the logs filter and appear in the all items view
✅ Consistent UI: State action items follow the same visual pattern as other timeline items with:
Technical Details
CommandType.StateActionCompletefrom reactotron-core-contractStateActionCompletePayloadfor type safetyTesting
Screenshots
State action items will appear in the timeline with "ACTION" title and the action name as preview text. The detail panel will show the action type and payload in a structured tree view.
Breaking Changes
None - this is purely additive functionality.
Related Issues
Implements support for Redux state action tracking in Reactotron timeline.