Code Monkey home page Code Monkey logo

Comments (10)

mweststrate avatar mweststrate commented on June 1, 2024 1

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.

from mobx-remotedev.

mweststrate avatar mweststrate commented on June 1, 2024 1

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

screenshot from 2016-10-10 23-21-00
screenshot from 2016-10-10 23-19-38

from mobx-remotedev.

zalmoxisus avatar zalmoxisus commented on June 1, 2024 1

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

from mobx-remotedev.

mweststrate avatar mweststrate commented on June 1, 2024 1

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?

from mobx-remotedev.

antitoxic avatar antitoxic commented on June 1, 2024 1

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

from mobx-remotedev.

antitoxic avatar antitoxic commented on June 1, 2024

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.

from mobx-remotedev.

mweststrate avatar mweststrate commented on June 1, 2024

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 ?

from mobx-remotedev.

zalmoxisus avatar zalmoxisus commented on June 1, 2024

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

from mobx-remotedev.

zalmoxisus avatar zalmoxisus commented on June 1, 2024

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

from mobx-remotedev.

zalmoxisus avatar zalmoxisus commented on June 1, 2024

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

from mobx-remotedev.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.