reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2024-11-25 11:03:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Use jumpToAction instead of jumpToState

* Jumping to action is time traveling

* Fix bad null check

* Fix types

* Fix JUMP_TO_ACTION handling

* Use indexOf
This commit is contained in:
Nathan Bierema 2022-01-06 22:27:50 -06:00 committed by GitHub
parent 3930411ade
commit b4f2958dda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
extension/src/app/service/Monitor.ts
View File

@ -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') {

2
packages/redux-devtools-app/src/actions/index.ts
View File

@ -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 {

8
packages/redux-devtools-app/src/reducers/instances.ts
View File

@ -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;
if (typeof currentStateIndex === 'undefined' && action.actionId) {
currentStateIndex = liftedState.stagedActionIds.indexOf(action.actionId);
}
const currentStateIndex =
action.type === 'JUMP_TO_STATE'
? action.index
: liftedState.stagedActionIds.indexOf(action.actionId);
return {
...state,
states: {

35
packages/redux-devtools-slider-monitor/src/SliderMonitor.tsx
View File

@ -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]
)
);
}
};