Fix usage of filtered actions with slider-monitor (#983)

* Use jumpToAction instead of jumpToState

* Jumping to action is time traveling

* Fix bad null check

* Fix types

* Fix JUMP_TO_ACTION handling

* Use indexOf

extension/src/app/service/Monitor.ts

@@ -51,7 +51,8 @@ export default class Monitor<S, A extends Action<unknown>> {
     this.lastAction && /^@@redux\/(INIT|REPLACE)/.test(this.lastAction);
   isMonitorAction = () =>
     this.lastAction && this.lastAction !== 'PERFORM_ACTION';
-  isTimeTraveling = () => this.lastAction === 'JUMP_TO_STATE';
+  isTimeTraveling = () =>
+    this.lastAction === 'JUMP_TO_STATE' || this.lastAction === 'JUMP_TO_ACTION';
   isPaused = () => {
     if (this.paused) {
       if (this.lastAction !== 'BLOCKED') {

packages/redux-devtools-app/src/actions/index.ts

@@ -104,11 +104,9 @@ export interface MonitorActionAction {
 export interface JumpToStateAction {
   type: 'JUMP_TO_STATE';
   index: number;
-  actionId: number;
 }
 export interface JumpToActionAction {
   type: 'JUMP_TO_ACTION';
-  index: number;
   actionId: number;
 }
 export interface PauseRecordingAction {

packages/redux-devtools-app/src/reducers/instances.ts

@@ -217,10 +217,10 @@ export function dispatchAction(
   if (action.type === 'JUMP_TO_STATE' || action.type === 'JUMP_TO_ACTION') {
     const id = state.selected || state.current;
     const liftedState = state.states[id];
-    let currentStateIndex = action.index;
+    const currentStateIndex =
-    if (typeof currentStateIndex === 'undefined' && action.actionId) {
+      action.type === 'JUMP_TO_STATE'
-      currentStateIndex = liftedState.stagedActionIds.indexOf(action.actionId);
+        ? action.index
-    }
+        : liftedState.stagedActionIds.indexOf(action.actionId);
     return {
       ...state,
       states: {

packages/redux-devtools-slider-monitor/src/SliderMonitor.tsx

@@ -17,7 +17,7 @@ import reducer from './reducers';
 import SliderButton from './SliderButton';
 
 // eslint-disable-next-line @typescript-eslint/unbound-method
-const { reset, jumpToState } = ActionCreators;
+const { reset, jumpToAction } = ActionCreators;
 
 interface ExternalProps<S, A extends Action<unknown>> {
   // eslint-disable-next-line @typescript-eslint/ban-types
@@ -151,11 +151,12 @@ class SliderMonitor<S, A extends Action<unknown>> extends (PureComponent ||
       this.pauseReplay();
     }
 
-    this.props.dispatch(jumpToState(value));
+    this.props.dispatch(jumpToAction(this.props.stagedActionIds[value]));
   };
 
   startReplay = () => {
-    const { computedStates, currentStateIndex, dispatch } = this.props;
+    const { computedStates, currentStateIndex, dispatch, stagedActionIds } =
+      this.props;
 
     if (computedStates.length < 2) {
       return;
@@ -164,20 +165,20 @@ class SliderMonitor<S, A extends Action<unknown>> extends (PureComponent ||
 
     let stateIndex;
     if (currentStateIndex === computedStates.length - 1) {
-      dispatch(jumpToState(0));
+      dispatch(jumpToAction(stagedActionIds[0]));
       stateIndex = 0;
     } else if (currentStateIndex === computedStates.length - 2) {
-      dispatch(jumpToState(currentStateIndex + 1));
+      dispatch(jumpToAction(stagedActionIds[currentStateIndex + 1]));
       return;
     } else {
       stateIndex = currentStateIndex + 1;
-      dispatch(jumpToState(currentStateIndex + 1));
+      dispatch(jumpToAction(stagedActionIds[currentStateIndex + 1]));
     }
 
     let counter = stateIndex;
     const timer = window.setInterval(() => {
       if (counter + 1 <= computedStates.length - 1) {
-        dispatch(jumpToState(counter + 1));
+        dispatch(jumpToAction(stagedActionIds[counter + 1]));
       }
       counter += 1;
 
@@ -198,7 +199,7 @@ class SliderMonitor<S, A extends Action<unknown>> extends (PureComponent ||
     }
 
     if (this.props.currentStateIndex === this.props.computedStates.length - 1) {
-      this.props.dispatch(jumpToState(0));
+      this.props.dispatch(jumpToAction(this.props.stagedActionIds[0]));
 
       this.loop(0);
     } else {
@@ -213,7 +214,11 @@ class SliderMonitor<S, A extends Action<unknown>> extends (PureComponent ||
     const aLoop = () => {
       const replayDiff = Date.now() - currentTimestamp;
       if (replayDiff >= timestampDiff) {
-        this.props.dispatch(jumpToState(this.props.currentStateIndex + 1));
+        this.props.dispatch(
+          jumpToAction(
+            this.props.stagedActionIds[this.props.currentStateIndex + 1]
+          )
+        );
 
         if (
           this.props.currentStateIndex >=
@@ -275,7 +280,11 @@ class SliderMonitor<S, A extends Action<unknown>> extends (PureComponent ||
     this.pauseReplay();
 
     if (this.props.currentStateIndex !== 0) {
-      this.props.dispatch(jumpToState(this.props.currentStateIndex - 1));
+      this.props.dispatch(
+        jumpToAction(
+          this.props.stagedActionIds[this.props.currentStateIndex - 1]
+        )
+      );
     }
   };
 
@@ -283,7 +292,11 @@ class SliderMonitor<S, A extends Action<unknown>> extends (PureComponent ||
     this.pauseReplay();
 
     if (this.props.currentStateIndex !== this.props.computedStates.length - 1) {
-      this.props.dispatch(jumpToState(this.props.currentStateIndex + 1));
+      this.props.dispatch(
+        jumpToAction(
+          this.props.stagedActionIds[this.props.currentStateIndex + 1]
+        )
+      );
     }
   };