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

1624 questions
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
  • 35,872
  • 66
  • 218
  • 401
9
votes
6 answers

React not rerendering after mobx observer change

Upon page load, I see "hi2" When I click the button, nothing happens. I tried with setUser as well. I suspect I'm just editing the props themselves and somehow the observable is not being triggered? See sample code of it not working here in a brand…
wiznaibus
  • 621
  • 3
  • 8
  • 16
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,307
  • 2
  • 29
  • 72
9
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,355
  • 3
  • 16
  • 31
9
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
  • 5,762
  • 17
  • 59
  • 108
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,337
  • 5
  • 23
  • 48
8
votes
1 answer

What exactly does mobx-react-lite's "useLocalStore" hook do, and why is it (only sometimes) needed?

Within the mobx-react documentation there are variations in how stores are created. For example, on the React Context page: In the first code sample, the store is instantiated with useLocalStore: const store = useLocalStore(createStore) In the…
arhnee
  • 715
  • 5
  • 19
8
votes
2 answers

Does MobX Observables have anything to do with RxJS ones?

The title is pretty much self explaining. I can't find any info about it. Angular uses RxJs observables under the hood is the same going on in React and MobX particularly?
Davit Karapetyan
  • 419
  • 4
  • 10
8
votes
0 answers

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
  • 29,028
  • 15
  • 60
  • 87
8
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ß
  • 9,087
  • 13
  • 59
  • 110
8
votes
1 answer

MobX - Replacing item in observable array?

Please correct me if I am wrong, but currently this is not possible using replace, as replace would replace the entire observable array and map should be used instead? I have an observable array like this: @observable questionsList = []; On server…
Wonka
  • 5,762
  • 17
  • 59
  • 108
8
votes
2 answers

Stateless function components cannot be given refs

I try to access some refs in my component. But I have this error in the console. withRouter.js:44 Warning: Stateless function components cannot be given refs (See ref "pseudo" in FormInputText created by RegisterForm). Attempts to access this ref…
dagatsoin
  • 2,337
  • 5
  • 23
  • 48
8
votes
2 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…
7
votes
1 answer

MobX: Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed

My context looks like this: class AuthStoreClass { authUser = null constructor() { makeAutoObservable(this) } login = async (params) => { const { data: { data: authUser } } = await loginUser(params) …
mleister
  • 443
  • 8
  • 23
7
votes
5 answers

Mobx console warning

I got this waring message from Mobx. [mobx.array] Attempt to read an array index (0) that is out of bounds (0). Please check length first. Out of bound indices will not be tracked by MobX @observable checks = { deviceType: ['phone','laptop',…
kkangil
  • 966
  • 1
  • 4
  • 22