Questions tagged [mobx]

Functional reactive programming library in JavaScript.

About

MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming. The philosophy behind MobX is very simple:

Anything that can be derived from the application state, should be derived. Automatically.

which includes the UI, data serialization, server communication, etc.

Links

1876 questions
7
votes
1 answer

How to use mobx-react 'observer' without decorator syntax?

I am trying to shoe horn mobx into a vr application I am making with react 360. I've tried to use the decorator syntax but after wasting a solid chunk of time trying to implement it, I've decided to use the nondecorator syntax. Here is an example…
Dan Rubio
  • 4,709
  • 10
  • 49
  • 106
7
votes
3 answers

Is it possible to create inheritance between two mobx stores?

I'm building two widgets with mobx/react, where all the logic sits inside the stores. Both share most of the design rules, so their stores are 95% identical. Is there a smart way to handle this situation? For example, is it possible to create…
Sveta
  • 1,041
  • 13
  • 22
7
votes
2 answers

MobX - Why should I use `observer` when I could use `inject` when injecting data into a React component

MobX documentation suggests I should use observer on all my components. However by using inject I get more fine grained control over what data causes a re-rendering of my components. My understanding is I that with observer, a change in all accessed…
Mateo Hrastnik
  • 533
  • 1
  • 7
  • 20
7
votes
2 answers

Mobx changing observable values outside of action

I'm getting the following error: proxyConsole.js:54 Error: [mobx] Invariant failed: Since strict-mode is enabled, changing observed observable values outside actions is not allowed. Please wrap the code in an `action` if this change is intended.…
user818700
7
votes
1 answer

Component disappears on update

I am implementing a word search facility in my React Native app. I have a MobX store, wordStore. Each text change triggers a database query via the setFilter action. This all works under the hood as I can see from console debug output. However, the…
Adamski
  • 3,585
  • 5
  • 42
  • 78
7
votes
4 answers

how does mobx achieve its magic

I am curious as to how mobx works under the hood. If I have a component that is both an observer and contains observables: @observer export default class Form extends Component { @observable submitted = false; @action.bound submit() { …
dagda1
  • 26,856
  • 59
  • 237
  • 450
7
votes
2 answers

`console.log` a mobx `@observable` whenever its value changes

Is there any way that a console.log will automatically fire whenever a mobx @observable changes value? I would do it with mobx dev tools but it fires a huge amount of console logs so it's hard to pin point the property whose value I am tracking.
alanbuchanan
  • 3,993
  • 7
  • 41
  • 64
7
votes
1 answer

How to test react components with mobx observable state

Here is a simplified version of my component: import React from 'react'; import { observable, action } from 'mobx'; import { observer } from 'mobx-react'; import { fromPromise } from 'mobx-utils'; @observer export class MyComponent extends…
alisabzevari
  • 8,008
  • 6
  • 43
  • 67
6
votes
2 answers

Mobx not updating to changes in array

I'm having trouble getting MobX to render when updating array. Here is a simplified version of the code: import React, { useState } from 'react' import { flow, makeObservable, observable } from 'mobx' import { observer } from 'mobx-react' import {…
Marteiro
  • 165
  • 1
  • 7
6
votes
2 answers

Typed yield expression in MobX-State-Tree flow

The recommended way to do asynchronous actions in MobX-state-tree (MST) is to use flow, which takes a generator function as first argument in which every promise should be yielded. yield expressions are of type any in TypeScript, but is there any…
Tholle
  • 108,070
  • 19
  • 198
  • 189
6
votes
1 answer

Fowarding a ref with mobx

i am trying to build a custom component video player with react and mobx, and i need to drill a refrence from a main component to a child Component but i'm getting an error message when i use the forwardRef function on a component that is an…
user13468285
6
votes
2 answers

Type 'Context' is missing the following properties from type 'Context': Provider, Consumer TS2345

I am trying to use rootstore to access two different stores in my react Project. RoorStore.ts => import ExtractionStore from "./extractionStore"; import UserStore from "./userStore"; import { createContext } from "vm"; export class RootStore { …
Exorcist
  • 123
  • 2
  • 10
6
votes
2 answers

Whats the difference between @observable and @observable.ref modifiers in mobx?

Mobx supports both @observable and @observable.ref modifiers and their official doc says observable: This is the default modifier, used by any observable. It clones and converts any (not yet observable) array, Map or plain object into it's…
freakomonk
  • 574
  • 1
  • 5
  • 15
6
votes
3 answers

React native + Mobx, @inject decorator throws an error

I'm trying to use mobx with react native and stuck into a problem. @inject('someStore') @observer export class SomeComponent extends Component { render() { ... } } I'm sure I configured properly babel plugins for decorator but @inject…
jesuisgenial
  • 685
  • 1
  • 5
  • 15
6
votes
1 answer

Importing CSS variables into a Typescript file

We created a theme.css :root file with a number of commonly used variables to use across the various other .css files for our app. But some of our older code has a similar setup, but in a theme.ts file with some variables. I want to import the…
mdb
  • 229
  • 5
  • 16