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
6
votes
1 answer

What is the @ used for in JavaScript?

I'm reading through the MobX docs and I'm confused by the following code: class Todo { id = Math.random(); @observable title = ""; @observable finished = false; } @observer class TodoListView extends Component { render() { …
nomad
  • 1,699
  • 5
  • 21
  • 35
5
votes
3 answers

react-router-dom v6 history push and useNavigate problem

I'am using react-router-dom v6 and mobex in my project and get an error when I use it as below. main.tsx: import React from 'react' import ReactDOM from 'react-dom/client' import App from './app/layout/App' import './app/layout/styles.css' import…
erhanbasturk
  • 53
  • 1
  • 4
5
votes
3 answers

Mobx makeAutoObservable not binding this

I've built a basic counter React app with a simple MobX store. I was able to create an observable MobX status using makeObservable but for some reason when I try to use makeAutoObservable I get the error Cannot read property 'counter' of…
Jon_B
  • 969
  • 4
  • 16
  • 24
5
votes
0 answers

MobX - Cannot obtain atom from undefined after migrate to MobX v.6+

I need to migrate MobX v.5 to MobX v6+ which supports react hooks, however after upgrading to MobX v6+ I get this error [MobX] Cannot obtain atom from undefined I was able to track down that when I want to create Lazy observable with…
Martin
  • 455
  • 1
  • 11
  • 34
5
votes
1 answer

I need to call a mobx action from inside axios interceptor

When an API returns a 401, I want to force logout the user. The following code is written inside a React Native Ignite project using Mobx import { useStores } from "../../models" this.apisauce.axiosInstance.interceptors.response.use(response => { …
AnonymousSB
  • 3,516
  • 10
  • 28
5
votes
4 answers

Confusion between mobx-state-tree and mobx-keystone. When to use which?

Both recommended in the official Mobx page if one wants an opinionated way to using mobx for state management. Based on these(1,2), keystone seems like an improvement of state-tree. Having everything that state-tree has + more. Nowhere I could find…
5
votes
3 answers

Why doesn't MobX v6.x work as expected in React with Typescript?

I am currently writing a React App, that should be able to rerender components when the value of any observable changes. The problem is, that I can't get email to rerender if it changes. store.ts export class ExampleStore { @observable email =…
Keimeno
  • 2,512
  • 1
  • 13
  • 34
5
votes
1 answer

async load referenced data in mobx-state-tree

I have looked through the mobx-state-tree documents and even the test file https://github.com/mobxjs/mobx-state-tree/blob/master/packages/mobx-state-tree/tests/core/reference-custom.test.ts#L148 to figure out how to populate a reference node from an…
5
votes
2 answers

How to test components using Mobx stores with Jest

I'm trying to test my React components using Mobx stores with Jest and React-testing-library. The problem is that I have no clues on how to inject my stores for the test. Here is my simplified codes. StaffInfo.js(component) import React, {…
dorong
  • 65
  • 1
  • 2
  • 5
5
votes
2 answers

How to deal with inconsistent mobx-state-tree snapshots?

I am writing an electron app and I keep all my app data inside a single MST tree. Now I noticed that every now and then you run into a situation where data becomes inconsistent (missing reference object etc). While this can happen with any type of…
stoefln
  • 14,498
  • 18
  • 79
  • 138
5
votes
1 answer

npm start run problem with react-app-rewire

I am trying to use mobx in a React.js project. I have installed these packages using the yarn add command: yarn add mobx mobx-react react-app-rewired react-app-rewire-mobx After that I have replaced react-scripts with react-app-rewired in…
hd.
  • 17,596
  • 46
  • 115
  • 165
5
votes
2 answers

Component not re-rendering when nested observable changes

Adding a node to a list and yet a component is not re-rendering. Mobx Chrome Extension dev tools says it's a dependency but for some reason still no reaction! A button renders 'Add' or 'Remove' based on whether a node is in a list. It doesn't…
ali_wetrill
  • 173
  • 1
  • 9
5
votes
0 answers

Is there a problem when use of mobx in my project , the error is 'Support for the experimental syntax 'decorators-legacy' isn't currently enabled'

I configured my package.json and babelrc but I got some errors when I used decorators. I use "react16.8.1" and "mobx5.9.4". My babelrc code: "presets": [ "@babel/preset-env", "@babel/preset-react", ], "plugins": [ …
5
votes
1 answer

Why are React components rendering twice when wrapped with observer()?

Simply wrapping React components with observer() seems to cause them to render twice. What could the possible reasons for this be? I am running the latest versions of react 16.8.3, mobx 5.9.4 and mobx-react-lite 1.2.0 For example: import React from…
user1843640
  • 3,613
  • 3
  • 31
  • 44
5
votes
1 answer

ReactJS & MobX: TypeError: ... is not a function - but it is?

SidenavStore.js - defines if the Sidenav should be visible or not, default true: const SidenavStore = types .model('SidenavStore', { isSidenavVisible: types.optional(types.boolean, true), }) .actions(self => ({ hideSidenav: () => {…
IAspireToBeGladOS
  • 1,434
  • 3
  • 19
  • 34