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
12
votes
5 answers

MobX - Reset all store observables back to initial state?

Given a MyQuestionStore store: class MyQuestionStore { @observable asked = 'today'; @observable answered = false; @observable question = { upvotes: 0, body: null, asker: null, askerPoints: null, askerBadges: null } //…
Wonka
  • 8,244
  • 21
  • 73
  • 121
12
votes
2 answers

Two ways of defining ES6 React Components

I was looking at this fiddle for MobX and I've seen these two ways of defining React Components in ES6 other places as well, like Dan Abramov's egghead redux video series. @observer class TodoListView extends Component { render() { …
Grant Eagon
  • 1,400
  • 1
  • 12
  • 24
11
votes
2 answers

Error: [mobx-state-tree] Failed to resolve reference XXX to type 'User'

Context I have a React application that is backed by mobx-state-tree (MST). One of the pages makes two parallel API calls to fetch a list of Projects and a list of system Users. The responses of these two APIs are then applied as snapshot to two…
Igor Soloydenko
  • 11,067
  • 11
  • 47
  • 90
11
votes
4 answers

MobX performance when replacing observable data

I need to replace data in my observable object when I get a new dump from the socket: class Store { @observable data = { foo: 'bar' } replaceFromDump(newData) { this.data = newData } } const store = new…
David Hellsing
  • 106,495
  • 44
  • 176
  • 212
11
votes
4 answers

React: Don't render components in table who aren't visible

I have a table with >30 rows and >50 columns. Each row and each cell is a specific React component, since you can manipulate them and they change behaviour and look based on changing data. So my component hierachy looks like this: Grid -> Row ->…
Johannes Klauß
  • 10,676
  • 16
  • 68
  • 122
10
votes
1 answer

How to get a plain object from mobx object?

I defined a mobx map as below: @observable editors = observable.map(); then I added object on the editors as below: editors.set(key, { alias: 'alias-1', message: 'hello', }) when I get the object from editor as below: let myEditor =…
Joey Yi Zhao
  • 37,514
  • 71
  • 268
  • 523
10
votes
3 answers

React + Mobx: 'this' is null when trying to update store

Just getting started with Mobx & React and having trouble getting the store to update. I get error when clicking the button, which should update the 'me' property: Store.js:12 Uncaught TypeError: Cannot set property 'me' of null My store: import {…
Chris
  • 1,557
  • 5
  • 19
  • 36
10
votes
5 answers

Using MobX observable decorators with create-react-app

The MobX docs tell me I must "use the transform plugin transform-decorators-legacy and make sure it is first in the plugins list", in order for the decorators to work. The MobX boilerplate project suggests I need a .babelrc like: { "presets": [ …
Scott
  • 4,211
  • 3
  • 17
  • 20
10
votes
5 answers

Mobx performance

I read from different sources that mobx outperforms react renderer and are faster then redux. However if I made couple of tests it shows that adding new data to mobx observables are pretty slow. In react-native environment every milliseconds counts…
Mac
  • 468
  • 1
  • 5
  • 10
9
votes
5 answers

Is it possible to use React Hooks outside of functional component, or i have to use mobx or redux?

I am new to React, and when I was reading about the docs, I found there were two ways to implement React components, functional-based and class-based. I know before React 16.8 it's not possible to manage state in functional components, but after…
apporc
  • 870
  • 3
  • 11
  • 23
9
votes
1 answer

How to test mobx reaction?

Note: This is not a real App but a distilled version of the problem. I have a simple application fake Todo that uses @computed to get the value of TodoItemComputed.isSelected: import { computed, observable, action } from 'mobx'; export class…
Michael_Scharf
  • 33,154
  • 22
  • 74
  • 95
9
votes
1 answer

Make typescript see props from decorators

I have simple component that uses mobx and decorators like this import * as React from "react"; import { observer, inject } from "mobx-react/native"; import { Router as ReactRouter, Switch, Route } from "react-router-native"; import Dashboard from…
Ilja
  • 44,142
  • 92
  • 275
  • 498
9
votes
2 answers

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (1:0)

I keep hitting this error. Its happened a few times recently and now I can't get rid of it. I'm using MobX in my React Native project and so I need something in my .babelrc so I have decorator support: { "presets": ["react-native"], "plugins":…
Adamski
  • 3,585
  • 5
  • 42
  • 78
9
votes
3 answers

How to structure mobx

I'm trying to figure out how to structure my app, for example, I have a model User, a generic UserStore to keep track all users load so far and some UI related stores like FriendList, PendingFriendList, BlockedUserList, LikedUserList, etc. like…
9
votes
3 answers

How to use class model with Redux (with a Mobx option)

EDIT: I finally choosed Mobx.js, refer to @mweststrate answer for details. All learning ressources about redux show how to use it with plain object models. But I can't figure out how to use it when you use some es6 Class models. For example, let's…
dagatsoin
  • 2,626
  • 6
  • 25
  • 54