looping the slider

[faceyspacey]

I read an article a few months ago--I think by @zalmoxisus--about how @gaearon was initially interested in being able to have his application states looped through while he made changes to the code. It seems it would be trivial at this point to implement that in the redux devtools slider. Perhaps with 2 modes:

• looping from left to right, then from right to left, repeat (i.e. like "pong")
• looping from left to right, then left to right again, repeat

Are there any challenges to implementing this or reasons why nobody has done it yet?

[zalmoxisus]

AFAIK, by loop mode, he meant recomputing only already dispatched actions when you make any changes in your code, preventing any other actions and side effects till you exit from this mode. It is already implemented, see my article for more details.

However, looping the slider would be also useful, and it's not difficult to implement.

[faceyspacey]

@zalmoxisus I can't quite discern what the difference between the two are?? When you move the slider around and change your reducers or components, you can see the changes. If it's locked, you can't mess it up by dispatching new actions, and therefore you only have the issues you mentioned in the article with performing side effects in store.subscribe() (by the way, is there a flag/state available like getState().subscribedServerToModel to mitigate that yet?)

Perhaps there is a certain depth to "recomputing only already dispatched actions" that I'm missing??

[zalmoxisus]

I guess you got it right. If you have these lines, whenever you change something in you reducers, Redux DevTools will recompute the states (will invoke the reducers with the actions dispatched before).

It was already working, the only feature to make complete that was locking, which is substituting “Stop” in this scenario:

I press “Record” and perform a few actions. Some of them may already be handled by reducers, some may not. Then I press “Stop”. Now DevTools enters a “loop” mode. It ignores any other actions in the app. I can’t interact with UI in my app. I’m focused on one scenario.

[zalmoxisus]

and therefore you only have the issues you mentioned in the article with performing side effects in store.subscribe() (by the way, is there a flag/state available like getState().subscribedServerToModel to mitigate that yet?)

There's a global variable window.__REDUX_DEVTOOLS_EXTENSION_LOCKED__ you can check, but, as mentioned in the article, better to move side effects to middlewares or use thunks. It's not documented as it's not a recommended approach.

[faceyspacey]

excellent. What's a quick overview of what must be done to add the loop functionality?

I imagine a loop button to the left of the play button. Perhaps you click it a second time to toggle the loop mode/direction (rather than add another dropdown).

[zalmoxisus]

A loop button near the speed dropdown would be great. Just not sure moving from right to left in this case is the expected behaviour, that should be configurable too. Any ideas of how to call those 3 modes?

[faceyspacey]

well its own dropdown. That's why I'm thinking we put it on the left side. It will balance out the slider having some tools on the left side. So like this:

[?loop mode dropdown] [loop button] [play button] [-----()----] [back/next] [speed dropdown]

I could make it so the dropdown only appears when you tap the loop button. In addition the loop button has an active state when pressed, i.e. appears pressed down and highlighted.

What code can you point me to in order to implement this?

[zalmoxisus]

Better to implement it in redux-slider-monitor. Currently we're using remotedev-slider, but will move back when remotedev-monitor-components will be ready.

[faceyspacey]

Which are the chrome devtools currently using? What's the timing look like for remotedev-monitor-components?

[zalmoxisus]

remotedev-monitor-components will just offer some visually enhanced components (with different themes) for monitors. Please contribute to redux-slider-monitor. I hope in about a week we'll be able to deprecate remotedev-slider.