feat(reactotron-app): show redux diffs in timeline (#1531 by @camilossantos2809)

## Please verify the following:

- [x] `yarn build-and-test:local` passes
- [x] I have added tests for any new features, if relevant
- [ ] `README.md` (or relevant documentation) has been updated with your
changes

## Describe your PR



This change allows developers to see what has been modified in the store
after an action is dispatched.

It is particularly useful when an action updates multiple modules. When
an action is called in Redux, the current store is compared with the new
store, and the differences are sent to Reactotron to be displayed in the
timeline.

To determine these differences, the microdiff package was used and added
as a dependency to reactotron-redux.

I am not entirely familiar with your build process, but I assume that
the microdiff package will be installed automatically via npm/yarn when
developers upgrade the Reactotron plugin in their projects.

I'm open to feedback and suggestions for further improvements to this
implementation. Please feel free to reach out if you have any questions
or if there are areas you'd like me to refine.

closes #496 

![Screenshot 2025-01-20 at 14 12
29](https://github.com/user-attachments/assets/1528678c-1143-49ab-917f-8be9dd1a62ae)

---------

Co-authored-by: Jamon Holmgren <code@jamon.dev>
Co-authored-by: Ítalo Masserano <italo_masserano@outlook.com>
Co-authored-by: Infinite Red <ci@infinite.red>
Co-authored-by: Kedar Sarmalkar <110056501+ksarmalkarbb@users.noreply.github.com>

Author: 5 people

lib/reactotron-core-contract/src/command.ts

@@ -93,6 +93,7 @@ export interface Command<
   important: boolean
   messageId: number
   payload: Payload
+  diff?: any
 }
 
 export type CommandEvent = (command: Command) => void

lib/reactotron-core-contract/src/diff.ts

@@ -0,0 +1,17 @@
+export interface DifferenceCreate {
+  type: "CREATE"
+  path: (string | number)[]
+  value: any
+}
+export interface DifferenceRemove {
+  type: "REMOVE"
+  path: (string | number)[]
+  oldValue: any
+}
+export interface DifferenceChange {
+  type: "CHANGE"
+  path: (string | number)[]
+  value: any
+  oldValue: any
+}
+export type Difference = DifferenceCreate | DifferenceRemove | DifferenceChange

lib/reactotron-core-contract/src/reactotron-core-contract.ts

@@ -3,3 +3,4 @@ export * from "./log"
 export * from "./openInEditor"
 export * from "./server-events"
 export * from "./state"
+export * from "./diff"

lib/reactotron-core-server/src/reactotron-core-server.ts

@@ -221,13 +221,14 @@ export default class Server {
       socket.on("message", (incoming: RawData) => {
         const message = JSON.parse(incoming.toString())
         repair(message)
-        const { type, important, payload, deltaTime = 0 } = message
+        const { type, important, payload, deltaTime = 0, diff } = message
         this.messageId++
 
         const fullCommand: Command = {
           type,
           important,
           payload,
+          diff,
           connectionId: thisConnectionId,
           messageId: this.messageId,
           date: extractOrCreateDate(message.date),
@@ -291,6 +292,7 @@ export default class Server {
             id: thisConnectionId,
             address: partConn.address,
             clientId: fullCommand.clientId,
+            diff,
           })
 
           // then trigger the connection

lib/reactotron-core-ui/src/components/TreeViewDiff/index.tsx

@@ -0,0 +1,96 @@
+import React, { ReactElement, type ReactNode } from "react"
+import { JSONTree, type ValueRenderer } from "react-json-tree"
+import styled from "styled-components"
+
+import useColorScheme from "../../hooks/useColorScheme"
+import { ReactotronTheme, themes } from "../../themes"
+import type { Difference } from "reactotron-core-contract"
+
+// TODO: Ripping this right from reactotron right now... should probably be better.
+const theme = {
+  author: "david hart (http://hart-dev.com)",
+  base0A: "#f9ee98",
+  base0B: "#8f9d6a",
+  base0C: "#afc4db",
+  base0D: "#7587a6",
+  base0E: "#9b859d",
+  base0F: "#9b703f",
+  base00: "#1e1e1e",
+  base01: "#323537",
+  base02: "#464b50",
+  base03: "#5f5a60",
+  base04: "#838184",
+  base05: "#a7a7a7",
+  base06: "#c3c3c3",
+  base07: "#ffffff",
+  base08: "#cf6a4c",
+  base09: "#cda869",
+  scheme: "twilight",
+}
+
+const RemovedValue = styled.span`
+  color: ${(props) => props.theme.delete};
+  text-decoration: line-through;
+  margin-right: 4px;
+`
+const NewValue = styled.span`
+  color: ${(props) => props.theme.string};
+`
+
+const getTreeTheme = (baseTheme: ReactotronTheme) => ({
+  tree: { backgroundColor: "transparent", marginTop: -3 },
+  ...theme,
+  base0B: baseTheme.foreground,
+})
+
+interface Props {
+  value?: Difference[]
+  level?: number
+}
+
+export default function TreeViewDiff({ value, level = 1 }: Props): ReactElement | null {
+  const colorScheme = useColorScheme()
+  if (value == null || value.length === 0) return null
+
+  const mappedValues: Record<string, ReactNode> = value.reduce((acc, diff) => {
+    if (diff.type === "CHANGE") {
+      acc[diff.path.join(".")] = (
+        <span>
+          <RemovedValue>{JSON.stringify(diff.oldValue)}</RemovedValue>
+          <NewValue>{JSON.stringify(diff.value)}</NewValue>
+        </span>
+      )
+      return acc
+    }
+    if (diff.type === "CREATE") {
+      acc[diff.path.join(".")] = <NewValue>{JSON.stringify(diff.value)}</NewValue>
+
+      return acc
+    }
+    if (diff.type === "REMOVE") {
+      acc[diff.path.join(".")] = <RemovedValue>{JSON.stringify(diff.oldValue)}</RemovedValue>
+      return acc
+    }
+    return acc
+  }, {})
+
+  const treeData: Record<string, string> = value.reduce((acc, diff) => {
+    acc[diff.path.join(".")] = diff.path.join(".")
+    return acc
+  }, {})
+
+  const valueRenderer: ValueRenderer = (_, untransformed) => {
+    const mappedValue = mappedValues[untransformed as string]
+    return mappedValue
+  }
+
+  return (
+    <JSONTree
+      data={treeData}
+      hideRoot
+      shouldExpandNodeInitially={(_keyName, _data, minLevel) => minLevel <= level}
+      theme={getTreeTheme(themes[colorScheme])}
+      valueRenderer={valueRenderer}
+    />
+  )
+}

lib/reactotron-core-ui/src/index.ts

@@ -14,6 +14,7 @@ import TimelineCommandTabButton from "./components/TimelineCommandTabButton"
 import Timestamp from "./components/Timestamp"
 import Tooltip from "./components/Tooltip"
 import TreeView from "./components/TreeView"
+import TreeViewDiff from "./components/TreeViewDiff"
 
 // Contexts
 import ReactotronContext, { ReactotronProvider } from "./contexts/Reactotron"
@@ -67,6 +68,7 @@ export {
   Timestamp,
   Tooltip,
   TreeView,
+  TreeViewDiff,
 }
 
 export type { CustomCommand } from "./contexts/CustomCommands/useCustomCommands"

lib/reactotron-core-ui/src/timelineCommands/StateActionCompleteCommand/index.tsx

@@ -1,20 +1,47 @@
-import React, { FunctionComponent } from "react"
+import React, { FunctionComponent, useState } from "react"
 import styled from "styled-components"
 import { MdRepeat, MdCode } from "react-icons/md"
 import stringifyObject from "stringify-object"
+import type { Difference } from "reactotron-core-contract"
 
 import TimelineCommand from "../../components/TimelineCommand"
 import ContentView from "../../components/ContentView"
 import { TimelineCommandProps, buildTimelineCommand } from "../BaseCommand"
+import TreeViewDiff from "../../components/TreeViewDiff"
 
 const NameContainer = styled.div`
   color: ${(props) => props.theme.bold};
   padding-bottom: 10px;
 `
+const TabContainer = styled.div`
+  display: flex;
+  padding-top: 8px;
+  padding-bottom: 8px;
+`
+const TabItem = styled.div<{ $active: boolean }>`
+  color: ${({ $active, theme }) => ($active ? theme.bold : theme.foregroundDark)};
+  cursor: pointer;
+  padding-right: 8px;
+  padding-left: 8px;
+  border-right: 1px solid ${(props) => props.theme.chromeLine};
+  :last-child {
+    border-right: none;
+  }
+  :first-child {
+    padding-left: 0px;
+  }
+`
+const Tab = styled.div`
+  display: flex;
+  padding: 10px;
+
+  border-bottom: 1px solid ${({ theme }) => theme.chromeLine};
+`
 
 interface StateActionCompletePayload {
   name: string
   action: any
+  diff?: Difference[]
 }
 
 interface Props extends TimelineCommandProps<StateActionCompletePayload> {}
@@ -27,6 +54,7 @@ const StateActionCompleteCommand: FunctionComponent<Props> = ({
   openDispatchDialog,
 }) => {
   const { payload, date, deltaTime } = command
+  const [tabActive, setTabActive] = useState<"preview" | "diff">("preview")
 
   const toolbar = []
 
@@ -66,7 +94,20 @@ const StateActionCompleteCommand: FunctionComponent<Props> = ({
       toolbar={toolbar}
     >
       <NameContainer>{payload.name}</NameContainer>
-      <ContentView value={payload.action} />
+      {payload.diff != null && (
+        <TabContainer>
+          <Tab>
+            <TabItem $active={tabActive === "preview"} onClick={() => setTabActive("preview")}>
+              Preview
+            </TabItem>
+            <TabItem $active={tabActive === "diff"} onClick={() => setTabActive("diff")}>
+              Diff
+            </TabItem>
+          </Tab>
+        </TabContainer>
+      )}
+      {tabActive === "preview" && <ContentView value={payload.action} />}
+      {tabActive === "diff" && <TreeViewDiff value={payload.diff} />}
     </TimelineCommand>
   )
 }

lib/reactotron-redux/package.json

@@ -40,6 +40,9 @@
     "typecheck": "yarn tsc",
     "ci:test": "yarn test --runInBand"
   },
+  "dependencies": {
+    "microdiff": "^1.5.0"
+  },
   "peerDependencies": {
     "reactotron-core-client": "*",
     "redux": ">=4.0.0"

lib/reactotron-redux/rollup.config.js

@@ -25,5 +25,5 @@ export default {
       : null,
     filesize(),
   ],
-  external: ["redux", "reactotron-core-client"],
+  external: ["redux", "reactotron-core-client", "microdiff"],
 }

lib/reactotron-redux/src/customDispatch.test.ts

@@ -20,7 +20,7 @@ describe("customDispatch", () => {
     dispatch(action)
 
     expect(mockStore.dispatch).toHaveBeenCalledWith(action)
-    expect(mockReactotron.reportReduxAction).toHaveBeenCalledWith(action, 1000, false)
+    expect(mockReactotron.reportReduxAction).toHaveBeenCalledWith(action, 1000, false, [])
   })
 
   it.todo("should handle 'PERFORM_ACTION' actions correctly")
@@ -94,7 +94,7 @@ describe("customDispatch", () => {
     dispatch(action)
 
     expect(mockStore.dispatch).toHaveBeenCalledWith(action)
-    expect(mockReactotron.reportReduxAction).toHaveBeenCalledWith(action, 1000, false)
+    expect(mockReactotron.reportReduxAction).toHaveBeenCalledWith(action, 1000, false, [])
   })
 
   it("should respect the exclude list and not send an item off of it if it is a regex", () => {
@@ -142,7 +142,7 @@ describe("customDispatch", () => {
     dispatch(action)
 
     expect(mockStore.dispatch).toHaveBeenCalledWith(action)
-    expect(mockReactotron.reportReduxAction).toHaveBeenCalledWith(action, 1000, false)
+    expect(mockReactotron.reportReduxAction).toHaveBeenCalledWith(action, 1000, false, [])
   })
 
   it("should respect the exclude list and should still send items not on the list", () => {
@@ -166,7 +166,7 @@ describe("customDispatch", () => {
     dispatch(action)
 
     expect(mockStore.dispatch).toHaveBeenCalledWith(action)
-    expect(mockReactotron.reportReduxAction).toHaveBeenCalledWith(action, 1000, false)
+    expect(mockReactotron.reportReduxAction).toHaveBeenCalledWith(action, 1000, false, [])
   })
 
   it("should exclude the restoreActionType by default", () => {
@@ -213,7 +213,7 @@ describe("customDispatch", () => {
     dispatch(action)
 
     expect(mockStore.dispatch).toHaveBeenCalledWith(action)
-    expect(mockReactotron.reportReduxAction).toHaveBeenCalledWith(action, 1000, true)
+    expect(mockReactotron.reportReduxAction).toHaveBeenCalledWith(action, 1000, true, [])
   })
 
   it("should call isActionImportant and mark the action as important if it returns false", () => {
@@ -237,6 +237,30 @@ describe("customDispatch", () => {
     dispatch(action)
 
     expect(mockStore.dispatch).toHaveBeenCalledWith(action)
-    expect(mockReactotron.reportReduxAction).toHaveBeenCalledWith(action, 1000, false)
+    expect(mockReactotron.reportReduxAction).toHaveBeenCalledWith(action, 1000, false, [])
+  })
+  it("should send the difference between the old state and the new state", () => {
+    const mockReactotron = {
+      startTimer: () => jest.fn().mockReturnValue(1000),
+      reportReduxAction: jest.fn(),
+    }
+    const mockStore = {
+      dispatch: jest.fn(),
+      getState: jest.fn().mockReturnValueOnce({ value: "old value" }).mockReturnValueOnce({
+        value: "new value",
+      }),
+    }
+    const action = {
+      type: "@module/someAction",
+      payload: { value: "new value" },
+    }
+
+    const dispatch = createCustomDispatch(mockReactotron, mockStore, {})
+    dispatch(action)
+
+    expect(mockStore.dispatch).toHaveBeenCalledWith(action)
+    expect(mockReactotron.reportReduxAction).toHaveBeenCalledWith(action, 1000, false, [
+      { oldValue: "old value", value: "new value", type: "CHANGE", path: ["value"] },
+    ])
   })
 })

lib/reactotron-redux/src/customDispatch.ts

@@ -1,9 +1,11 @@
+import diff from "microdiff"
+
 import { PluginConfig } from "./pluginConfig"
 
 export default function createCustomDispatch(
   reactotron: any,
   // eslint-disable-next-line @typescript-eslint/ban-types
-  store: { dispatch: Function },
+  store: { dispatch: Function; getState?: Function },
   pluginConfig: PluginConfig
 ) {
   const exceptions = [pluginConfig.restoreActionType, ...(pluginConfig.except || [])]
@@ -12,6 +14,9 @@ export default function createCustomDispatch(
     // start a timer
     const elapsed = reactotron.startTimer()
 
+    // save the state before the action is dispatched to be used on "diff"
+    const oldState = store?.getState?.()
+
     // call the original dispatch that actually does the real work
     const result = store.dispatch(action)
 
@@ -41,8 +46,8 @@ export default function createCustomDispatch(
       if (pluginConfig && typeof pluginConfig.isActionImportant === "function") {
         important = !!pluginConfig.isActionImportant(unwrappedAction)
       }
-
-      reactotron.reportReduxAction(unwrappedAction, ms, important)
+      const state = store?.getState?.()
+      reactotron.reportReduxAction(unwrappedAction, ms, important, diff(oldState, state))
     }
 
     return result

lib/reactotron-redux/src/sendAction.ts

@@ -3,7 +3,7 @@ import type { ReactotronCore } from "reactotron-core-client"
 export default function createSendAction<Client extends ReactotronCore = ReactotronCore>(
   reactotron: Client
 ) {
-  return (action: { type: any }, ms: number, important = false) => {
+  return (action: { type: any }, ms: number, important = false, diff?: any) => {
     // let's call the type, name because that's "generic" name in Reactotron
     let { type: name } = action
 
@@ -16,6 +16,6 @@ export default function createSendAction<Client extends ReactotronCore = Reactot
     }
 
     // off ya go!
-    reactotron.send("state.action.complete", { name, action, ms }, important)
+    reactotron.send("state.action.complete", { name, action, ms, diff }, important)
   }
 }