by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jun 05 10:38
    KieranO547 closed #871
  • Jun 05 10:38
    KieranO547 commented #871
  • Jun 05 07:07
    FredyC commented #871
  • Jun 05 07:07
    FredyC commented #871
  • Jun 05 07:02
    KieranO547 labeled #871
  • Jun 05 07:02
    KieranO547 opened #871
  • Jun 04 15:47

    FredyC on mweststrate-patch-1

    (compare)

  • Jun 04 14:31

    mweststrate on master

    Tiny syntactic fix in Map docs … Merge pull request #2366 from a… (compare)

  • Jun 04 14:31
    mweststrate closed #2366
  • Jun 04 14:31
    mweststrate commented #2366
  • Jun 04 14:30
    coveralls commented #2367
  • Jun 04 14:30

    mweststrate on master

    docs: Added black lives matter … Merge pull request #2367 from m… (compare)

  • Jun 04 14:29
    mweststrate closed #2367
  • Jun 04 14:27

    mweststrate on gh-pages

    Deploy website Deploy website … (compare)

  • Jun 04 14:24
    gitpod-io[bot] commented #2367
  • Jun 04 14:24
    gitpod-io[bot] edited #2367
  • Jun 04 14:24
    mweststrate opened #2367
  • Jun 04 14:23

    mweststrate on mweststrate-patch-1

    docs: Added black lives matter … (compare)

  • Jun 04 14:22
    gitpod-io[bot] commented #2366
  • Jun 04 14:22
    gitpod-io[bot] edited #2366
Daniel K.
@FredyC
it doesn't matter when observable changes happen, but how to prevent them happening in some states
with pure mobx you would end up with some enum in one observable and then if/else or switch it inside the action
Luca Matteis
@lmatteis
i'd argue that with computed properties you don't really care how and when they change (like you do with statecharts)
Daniel K.
@FredyC
you are right you don't care how and when, but you simply want to prevent some unexpected states to happen :)
a great abstract example is semaphore, green, yellow, red lights ... you want a car to go with green only, no other
but from the point of view of running actions, you shouldn't care what is the current state, you just want to instruct the car to go
Daniel K.
@FredyC
it could go much deeper, of course, you might want a car to get ready with yellow, etc... and that's still trivial
even a stupid UI button could be in numerous states (idle, hover, active, pressed, disabled...) and each of those states might have different behavior
that's rather hard to do with just MobX
Luca Matteis
@lmatteis
yeah interesting
Michel Weststrate
@mweststrate
@pzuraq MobX doesn't use observables (in the classic sense of observable streams) underneath, it is just a quite simple object graph based on pointers (without listener callbacks etc) internally, thats waht makes it efficient. intercept and observe definitely are not in the core of MobX, and just bolted on top for historical reasons. I'd love to simply drop them, but it is now too late for that :-P.
@lmatteis to me the fundamental difference is (and why they are complementory), is that mobx is concerned about: after state has been changed, how is that reflected efficiently everywhere. It doesn't really provide tools (beyond some batching controls) to reason about how to arrive at that state change. XState takes the other side of the coin, it organizes the imperative process of going from an action to a state change in a controlled manner.
2 replies
Chris Garrett
@pzuraq
@mweststrate makes sense, though it does seem to fundamentally be a similar, push-based mechanism, based on my reading/understanding of it. It's not that different from the chains system that existed in Ember for instance for a long time.
Daniel K.
@FredyC
so true ^^ ... and when XState and MobX joins we have a superpower :)
Chris Garrett
@pzuraq
that sucks about observe and intercept though, I know the feeling with backwards compat 🙃
our latest iteration in tracking is fundamentally more demand-driven, which makes it much more minimal and less prone to issues like memory leaks, and in a lot of cases more efficient. But, in some cases, less efficient I think as well. It all depends
Michel Weststrate
@mweststrate
sounds cool @pzuraq! I'll try to read up on it. Note that in combination with React the computes become hot automatically in MobX, so in practice the not-memoizing-by default isn't really an issue, except in 2 liner code sandboxes where there are no real consumers :P
Mark Vujevits
@vujevits
Hi, I'm new to mobx. I started using observable/observer. Seems to be working fine, but I'm storing slate-js editor state there as well, which uses immer.js. I'm getting to following error:
Error: [mobx] Observable arrays cannot be frozen
Chris Garrett
@pzuraq
@vujevits if you’re using MobX with Immer that seems like it’s a bit of overlap of concerns. You may want to make the property an @observable.ref I think, so then it’s not deeply tracked and you can let Immer handle updating the value immutably
I’m not an expert though, so there may be better solutions 😅
Mark Vujevits
@vujevits
I'm afraid I need a bit more then that : D
literally first time I'm trying it
also I'm not using decorator syntax
just have an observable and all my components are wrapped with observer
Daniel K.
@FredyC
@vujevits observable.ref is normal function, don't worry about decorators :) might be better to keep immer object outside of mobx observable completely though
Mark Vujevits
@vujevits
thanks @FredyC , I'm using a workaround now with debouncing and serializing slate's state, tbh I was surprised to see this issue, I was under the impression @mweststrate is the original author of both mobx and immer.
Daniel K.
@FredyC
@vujevits That is a correct impression :) but those libraries have different use cases, they are not compatible
Alberto
@nkint

Hi! I am on a project with mobx 5.15, react 16.13
I just found those "strict" configuration:

// MobX configuration
configure({
    enforceActions: 'always',
    observableRequiresReaction: true,
    reactionRequiresObservable: true,
});

and I like them a lot, found few place where i missed observer and I fixed it.

Now, I'm reading an observable variable inside a useEffect but... It does work but keep on say Observable ... being read outside a reactive context. The component is observer, I don't understand why. any help?

In general I need some action to be fired when the component is "mounted". I have this:

const ProductDashboardInner: React.FC = observer( () => {
    const { router, products } = useGlobalState();

    useEffect(() => {
        const { queryParams = {} } = router;
        products.fetch(queryParams);
    }, []);

       ....

Maybe this approach is wrong and is there a better way?

Michel Weststrate
@mweststrate
I think the approach is fine, to make it explicit that this is intentionally you can use useEffect(action(() => { ....
Alberto
@nkint
thanks @mweststrate !
Rainer Wittmann
@RainerAtSpirit

XState and Mobx seem to work pretty well together.

const service = interpret(machine).start()
const service$ = fromStream(service)
const serviceAndComputed = observable({
  service$,
  get upperCaseName() {
    return this.service$.current.context.name.toUpperCase()
  }
})

https://codesandbox.io/s/mobx-react-lite-meets-xstate-bl9u9?file=/src/index.js:724-946

I haven't tested that yet with larger applications but my assumption is that I'm getting optimized rendering for free by simply using mobx-react or mobx-react-lite.

Les Szklanny
@AjaxSolutions

I'm curious why options.useForceUpdate is an option and how this could be used in practice.

https://github.com/mobxjs/mobx-react-lite/blob/master/src/useObserver.ts#L45

Daniel K.
@FredyC
don't worry about that, if you don't know how you would use it then it's likely you don't need it :)
it was exposed for some earlier experiments, not sure if it's actually used somewhere in the wild
Sameer Rahmani
@lxsameer
hey folks, @observable x = []; returns a proxy which doesn't have a map method
is that normal ?
Daniel K.
@FredyC
@lxsameer I think you are mistaken :) don't inspect the proxy object, that will be always different because MobX needs to have it under control
if you want to do some monkey patching or other shenanigans and you need that method to exists, you will have to convert it with toJS method
CurrySenpai
@CurrySenpai

hello,
I have a question regarding the flow of business logic, for example, I am developing a trivia app, when the user selects the answer it calls the action setAnswer, then in the UI a corresponding animation is shown for the correct answer or erroneous, and when the animation is finished the action nextQuestion orgameOver is invoked

When I wasn't using animation I called nextQuestion insidesetAnswer and it was easier to understand the flow.

@action
   Future <void> setAnswer (String answer) async {
     if (canAnswer) {
       if (answer == question.answer) {
         playerAnswerStatus = PlayerAnswerStatus.correct;
         nextQuestion ();
       } else {
         playerAnswerStatus = PlayerAnswerStatus.wrong;
        gameOver ();
       }
     }
   }

I'm doing fine now that I call nextQuestion orGameOver from the UI, or is there another way?
Since it is difficult to follow the flow of the action without reviewing the UI

Michel Weststrate
@mweststrate
@CurrySenpai personally I usually try to introduce a constant with the timeout, and leverage that both in this action (e.g. a setTimeout + gameOver call) and the animation. Not sure how others do this :). P.s. note that this is the JavaScript channel, not the Flutter one (see mobx.dart)
CurrySenpai
@CurrySenpai

@mweststrate Thanks, the timeout makes sense and it will work, I'll use it for now.

P.D. In the dart channel(discord) nobody answer me haha, (for now :)), I'm looking for examples of that style in js, in theory it should be the same, but I can't find it.

Alpesh
@AlpeshMN
Is there a way to implement JSONSchemaForm in MOBX-React project.?I am completely new to JSON Schema and wonder if there are any available examples related to it to know about.
Daniel K.
@FredyC
there certainly would be a way, but it's not an easy task without experience
Henning Dieterichs
@hediet

Hi there ;) Is there a way to make this snippet shorter / better:

@computed get data() {
    const serviceApi = this.props.model.serviceApi;
    if (!serviceApi) {
        return fromPromise(
            new Promise<never>(() => {})
        );
    }
    return fromPromise(serviceApi.getOrganizations());
}

?

model.serviceApi is an observable field of course
Henning Dieterichs
@hediet

Ah of course, I can do simply this:

@computed get data() {
    const serviceApi = this.props.model.serviceApi;
    return fromPromise(
        serviceApi
            ? serviceApi.getOrganizations()
            : new Promise<never>(() => {})
    );
}

This looks simple, but I think it is super complex :D I love mobx for this kind of stuff :D

Maksim Kazachenka
@sffirm
Is there a mobx-react-devtools for mobx-react-lite?
Daniel K.
@FredyC
it's the same thing...
Maksim Kazachenka
@sffirm
i can't use devtools for lite version
Daniel K.
@FredyC
image.png
Alberto
@nkint

Hi! So I'm using mobx-react and I'm super happy. Anyway, I'm a big enthusiast about this old (but really gold) article:

How to decouple state and UI - a.k.a. you don’t need componentWillMount
https://medium.com/hackernoon/how-to-decouple-state-and-ui-a-k-a-you-dont-need-componentwillmount-cc90b787aa37#.k9tvf5nga

I always looked for a router that is not component based (like react-router) and this seems to be what I'm looking for: https://github.com/kitze/mobx-router . does anyone ever tried to let it work with mobx-state-tree?

Michel Weststrate
@mweststrate
I think this one is specific for MST: https://t.co/1IMIGtqI7A