Comments (10)
from mobx-react.
I found the solution, you just have to declare the action functions as follows:
toggleText = () => {
this.textVisibility = !this.textVisibility;
}
Final:
class TestStore {
textVisibility = false;
constructor() {
makeObservable(this, {
textVisibility: observable,
isTextVisible: computed,
toggleText: action
});
}
get isTextVisible() {
return this.textVisibility;
}
toggleText = () => {
this.textVisibility = !this.textVisibility;
}
}
const testStore = new TestStore();
from mobx-react.
Thanks for the response.
Actually this is not the real code & I just publish a sample code to demonstrate what I mean. In the real project I use typechecker.
from mobx-react.
I have a similar question, so I decided not to open a new issue, but to ask in this one.
I am trying to create a react application using mobx and typescript. But it doesn't work.
I expect the timer to count the seconds. And I see that the event happens and updates the counter. But the component is not rerender. What am I doing wrong?
import React from "react";
import { observable, action } from "mobx";
import { observer, inject, Provider } from "mobx-react";
export class TestStore {
@observable timer = 0;
@action timerInc = () => {
this.timer += 1;
};
}
interface IPropsTestComp {
TestStore?: TestStore;
}
@inject("TestStore")
@observer
export class TestComp extends React.Component<IPropsTestComp> {
constructor(props: IPropsTestComp) {
super(props);
setInterval(() => {
this.props.TestStore!.timerInc();
}, 1000);
}
render() {
return <div>{this.props.TestStore!.timer}</div>;
}
}
export class TestApp extends React.Component {
render() {
return <Provider TestStore={new TestStore()}>
<TestComp />
</Provider>
}
}
"mobx": "^6.0.1",
"mobx-react": "^7.0.0",
"react": "^16.13.1",
Updated:
I was helped on the stackoverflow . Working code:
import { makeAutoObservable } from "mobx";
export class TestStore {
timer = 0;
constructor() {
// Don't need decorators now, just this call
makeAutoObservable(this);
}
timerInc = () => {
this.timer += 1;
};
}
from mobx-react.
from mobx-react.
@skillful-alex Mobx 6 works fine with React, but when it comes to React Native.... My issue is how to use Mobx6 in a React Native project!
from mobx-react.
React versus React Native should be quite irrelevant from MobX perspective. But without any more accurate information / minimal reproduction we cannot be of any further assistance.
from mobx-react.
same problem
from mobx-react.
As I understand it, this is the native version of React.
from mobx-react.
same solution
from mobx-react.
Related Issues (20)
- upgrade mobx-react version from 6.2.2 to 6.2.3οΌThere is an error HOT 7
- observer component re-renders even though observed value doesn't change HOT 4
- build 6.2.4 is broken (missing files) HOT 1
- [mobx-react 6.2.4] Unable to resolve path to module 'mobx-react' HOT 2
- Why not copy static propertities in prototype ? HOT 1
- Attempted import error: 'observerBatchingOptOut' is not exported from 'mobx-react-lite'. HOT 9
- Uncaught TypeError: Cannot add property Symbol(isMobXReactObserver), object is not extensible HOT 2
- New version is breaking previous versions (Error: mobx-react-lite@3 requires mobx at least version 6 to be available) HOT 5
- Problem with version 6.3.0 and mobx v5 HOT 11
- Unable to resolve module `./assertEnvironment` HOT 19
- Document `enableStaticRendering` HOT 5
- The problem of `useRef` to keep the store instance HOT 2
- What is the best way to deal with large and dynamic FlatLists? HOT 3
- mobx-react.js.org dead? HOT 1
- deepEqual condition for re-rendering? HOT 9
- observer doesn't re-render functional components HOT 2
- Not working in nextjs using mobx:6.0.1 HOT 2
- Incosistencies in mobx-react dependency versions. HOT 1
- Migration guide for mobx6 + mobx-react7? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mobx-react.