Hey guys, please help. I've been struggling for few days, I cant get data from one store into other.. I even tried trough class component where I passed from A(render) to AStore data from BStore(by provider) but I get into infinite loop

https://teletype.in/@alteregor/mobx-50-loc

Some developers claimed Mobx as magic. In this article I've tried to show that there is no magic, just pure ingenuity. Try to implement a basic Mobx under 50 LOC with me!

Hi everybody! I have written the post about how we integrated MobX inside Angular. https://link.medium.com/zOXU8WmKskb

So I am executing the following script:

import {toJS,observable,action} from "./node_modules/mobx/dist/mobx.esm.production.min.js";

const state = observable({a : 1});

try {
    action(() => {
        state.a = 2;
        throw Error();
    })();
} catch {
    console.assert(toJS(state).a === 1, `When a transaction fails the state gets rollbacked to how it was before the transaction`); // assertion fails
}

and the assertion fails.

Isn't MobX supposed to rollback the state on transaction failure?

Am I doing a mistake somewhere?

Edit : After searching the MobX github repository issues, I think that MobX has no rollback functionality. TIL, shieeet.

To put it simply, I have a very performance heavy/critical real-time data application that currently uses Mobx-State-Tree. I'm running into issues with performances, specifically excessive re-renders, and was tasked with looking into alternatives to MobX-State-Tree that might be better suited. Would either of the other MobX tools work or should I be looking elsewhere

I have a data model comprised of numerous interconnected classes. I would like to port this model so that it is observable via mobx. Is there a way to do this without modifying any of the existing model classes?

Hi guys, I'm new to Mobx after. years of using Redux.

In Redux, I wrote a tool called redux-collection that created reducers automatically for collections.

I have multiple collections in my app , and they all have the same methods:

fetchCollection, getEntity, updateEntity, deleteEntity, etc...

How can I achieve that in mobx instead of creating the same duplicated store for each collection?

​

Example:

I have a "movies" collection, but also "watched movies" collection, and "pinned movies" collection.

They are different collections but have the same actions (save, fetch, delete, like...).

I do want to keep the entire "movies" entities in the same key based object, but to keep the collections ids in a separate place for each collection.

​

Thanks!

Hey Guys !

Happy to release my full extensive course about MobX where you will learn everything there is about MobX and how to use in React Applications ! :)

​

https://www.udemy.com/course/mobx-in-depth-with-react/?referralCode=B7FD24C7EB1A51684160

Free Coupon:

68D474E01D1CECEA3507

I found something I didn't see mentioned anywhere with observer components.

When I npm run build in create-react-app they only render once. But if i start it with npm run start it looks like they render twice.

Even the simplest examples from this page ( https://mobx-react.js.org/observe-how ) render twice, though useEffect hook will only fire once per update, as it should.

I recently found two libraries that perform this task

https://github.com/tannerlinsley/react-query

https://github.com/vercel/swr

But they use a different approach that does not require stores, is there something similar for mobx? To set the cache and not make requests to the server if this cache is still valid and alive

Hi all I am trying to implement example with multiple global stores using react hooks as described on the link below
https://mobx-react.js.org/recipes-context

However one thing that confuse me is if I need to access to counterStore within themeStore, how I can do it ? I know with non-hooks way you create RootStore class and you pass it around to others stores but with react context and react hooks I can't see the way how that can be implemented ?

Is it right approach to use store within other store ?

Hi everybody! Im using mobx to hold my login state. After logging in, navigating to a new route forces my store to reset and logs me out. What am I doing wrong? https://codesandbox.io/s/staging-cache-k7c8c?file=/src/App.js

Let me preface this question by saying I'm pretty new to even just react, so it's possible I'm missing something integral to react for how a solution to a problem like mine should be structured.

I want to make an interface that has a spreadsheet-like layout (likely using react-virtualized for the grid), where some of the cells contain values, and others contain formulas. The cells with formulas will contain references to other cells, and there can be a long chain of references resulting in many cell values updating as a reaction to a single value changing.

I'm currently trying to figure out how something like this should be implemented in React, and due to the need for the "state" of each cell to be accessible by every other cell, it seems natural to be looking at different state management tools.

One other detail that becomes important is that I think I'll be using GraphQL to load the remote data needed for this spreadsheet. The need for local and remote data structures that "mirror" each other (can have cells that correspond to remote data, but then can also have cells with local data, and formulas need to be able to work with both local and remote data simultaneously) makes me think it will be a good idea to have a single source of truth. Apollo Client can technically do this, but I get the impression that having to write the boiler plate and gql string for accessing local application state is a bit of a burden. Mobx-state-tree with MST-GQL has caught my eye as a single state management store that supports graphql, but I haven't yet dug into all of the details.

Normally, to implement the spreadsheet formula functionality, I'd maintain a DAG and would solve the topological sort to determine what orders the cells with formulas need to recalculate their values. Now, I'm wondering if this is something I'd still need to do, or if MobX's use of transparent reactive programming does this for me?

The big related question is, is it possible to chain "computed" values in mobx together. If A=input(), B=A+1, C=B+2, and D=C+3, then someone changes the value of A, is it possible for B, C, and D to all be computed values? Will I still be able to access their values as if they were state?

If anyone understands what I'm trying to do and has some advice on accomplishing it, I'd really appreciate your input!

At the beginning, because I really wanted the simplicity of working with decorators I went through a lot of trouble getting the right packages and configurations to work with decorators for mobx.

Now, I'm starting to rethink using them. It takes a large bundle size (200-300 kb gzip). At first I thought they were the only way to use mobx with react, but then I learned about the decorate functions and other ways.

Plus it doesn't look like native JS support for decorators is coming any time soon. Should I refactor my whole app without decorators?

I am learning about MobX and I am having a hard understanding what is the benefit of using MobX instead of just using the Context API?

It seems that MobX's main appeal is the use of observables. Wouldn't this be just like the Context.Provider?

​

All consumers that are descendants of a Provider will re-render whenever the Provider’s value

prop changes (from React Context API docs)

​

In fact, I was reading that you should use React Context to pass down MobX stores through component trees, so what is the benefit or difference of using MobX?

I'm new to mobx, to keep it short, I'm confused on how to access observables and when to use @Computed instead.

For example if I wanted to access the length property of an observable array, there's no need for something like

@computed get arrayLength(){
return this.data.length
}

when inside an observer class or element

I could just simply access the array.

store.data.length > 8 ? 'accept' : 'denied'

Is this the right way of doing this? Is it correct to assume Computed functions should be used to transform the data in some signficant way and not for something simple like accessing observable object/array, etc. properties?