Roadmap

[zalmoxisus]

• Monitoring
• Time travelling
• Reset, commit, rollback, sweep
• Cancel / skip (toggle) actions
• Export / Import state
• Dispatch actions remotely
• Autogenerate tests
• Recompute states on hot reloading
• Show reactions
• Support for non-browser environment (unify with remotedev)

[mweststrate]

Hi @zalmoxisus / @antitoxic

I currently playing with the idea of a standardized state container, see this repo: https://github.com/mweststrate/mobx-state-tree, I'll try to push some more info to the readme next week, but I might be a very good fit for standardized time travelling etc etc.

[mweststrate]

Hey @zalmoxisus / @antitoxic here same updates on my work on the state tree (it will be part of an upcoming talk). Let me know what you think! It restricts state to be a tree, which made integration with the devtools surprisingly simple! Not entirely sure I did the middleware right, but seems to work :).

I didn't implement the replay yet though, is there an api that allows me to connect to the slider, to be able to replay actions?

https://github.com/mweststrate/mobx-state-tree/blob/0d0c5e1c70ff0dcea7fce53d1f10d97e661f33de/examples/boxes/src/index.js#L18
https://github.com/mweststrate/mobx-state-tree/blob/0d0c5e1c70ff0dcea7fce53d1f10d97e661f33de/examples/redux-todomvc/src/index.js#L10
https://github.com/mweststrate/mobx-state-tree/blob/0d0c5e1c70ff0dcea7fce53d1f10d97e661f33de/src/interop/redux-devtools.ts

[antitoxic]

As far as I know the Slider monitor just reverts to a previous state and then reapplies actions after that point. That's all what replaying does. Am I missing something?

In any case, I am not familiar with mobx-state-tree. I've added an issue there.

[mweststrate]

Yeah so the basic question is, where does it apply them to. If the devtools are loaded as middleware it has access to the store, but how does it revert to the base state. Dispatch @@INIT? If the send(action, state) api is used, and the slider is used, there should probably be an event that receives the state that needs to be restored, so that it can be applied to the original store. But I couldn't find such an event, did I overlook something @zalmoxisus ?

[zalmoxisus]

@mweststrate, looks impressive! For supporting the slider you just need to add subscribe and set the state when monitor is dispatching JUMP_TO_STATE, like in the example. Here's the implementation, and there are other monitor actions you can find there. Only the new LOCK_CHANGES isn't implemented yet as it's not possible in MobX to freeze any future changes except those from devtools (maybe in mobx-state-tree will be possible). Here's a blog post about why we need that.

@antitoxic, Slider (JUMP_TO_STATE) just set a state received from the extension. What you described is for canceling (skipping) actions.

[mweststrate]

awesome, that was the missing piece (skimmed the docs but completely missed it somehow). Gonna play with it! will you guys visit ReactNL or ReactiveConf?

[zalmoxisus]

@mweststrate, unfortunately not. Feel free to ping me if you have other questions or suggestions to improve the workflow.

The initial state is stored on the client part, the extension knows only the committed state which becomes different after clicking COMMIT.

[zalmoxisus]

@mweststrate, also you could use remotedev's connectViaExtension, which will bypass the extension when not available and use sockets to allow using it not only for web apps, but also for React Native, Cordova, server side... We're including it here, but of course it shouldn't be included by default in mobx-state-tree.

[antitoxic]

@mweststrate sadly I'm not going to any of the confs due to freelance wrap-ups before starting a new fulltime position. I wish I could. I guess with the new job I will have more opportunities to visit.

@zalmoxisus Alright, I thought JUMP_TO_STATE runs just once and the then actions are reapplied. If I understand correctly the slider just do JUMP_TO_STATE on every step.

[zalmoxisus]

@antitoxic, yes, and for every step it returns the index for Redux, and the state on the current index for non-Redux apps.

I'll publish today a new version of Slider Monitor, which makes it accessible and with some new features, so any suggestions are welcome.