I have this class:
class Mother{
#observable
name: string
child: Child = new Child(this)
constructor(){
makeObservable(this)
}
}
class Child{
constructor(mother: Mother){
const disposer = reaction(() => [mother.name], ()=>{})
console.log(getDependencyTree(disposer));
}
}
The output shows that the disposer has no dependency on mother.name. What am I missing?
The problem is the order of initialization: Child object is initialized before makeObservable(this) is called, thus mother.name is not yet an observable when running in reaction. By moving the intialization of child object after calling makeObservable(this), I solved the problem.
Related
I would like to pass my object based on JavaScript class from mixin to component without reactivity. I use TypeScript, so I can't set the object to this of mixin without setting types in data(). But data() reactivity breaks some thing in my object.
mixin.js:
export default {
setup() {
const foo = new Foo()
return {
foo,
}
}
}
component.js:
import mixin from './mixin.js'
export default {
setup() {
// How can I get foo here?
}
}
Update 1
Yes, it is good solution for using only one foo instance for everywhere.
But how can I use different foo instances for each component?
Same as in JS classes:
class Mixin {
foo() {
// ...
}
}
class Component extends Mixin {
bar() {
this.foo()
}
}
mixin.js
export const foo = new Foo()
Import (and use) foo anywhere in your app, including any setup() function:
import { foo } from './path/to/mixin'
The above uses the same instance everywhere. If you want to use different instances of foo in each separate component, mixin.js:
export const useFoo = () => new Foo()
Anywhere else:
import { useFoo } from './path/to/mixin'
const foo = useFoo()
However, take note the second approach creates a new intance of Foo() every time useFoo() is called. So once you called it, you must use foo in that component.
Calling useFoo() multiple times in the same component will generate multiple instances, unlike how you'd use useStore(), for example.
But, I'm wondering, why do you need a mixin in the first place? Why not use:
const foo = new Foo()
...in the components where you need it?
What are you trying to achieve? And, more importantly, why?
I have the following observable class sample:
class AppState implements IAppState {
isSignedIn: boolean;
private constructor(
isSignedIn: boolean,
) {
this.isSignedIn = isSignedIn;
makeAutoObservable(this);
}
get itIsSafeToFetch(): boolean {
return this.isSignedIn === true;
}
}
The thing is that I have getter itIsSafeToFetch(), which does not change any observable values. But when I run the code I get warning:
[MobX] Since strict-mode is enabled, changing (observed) observable values
without using an action is not allowed.
Tried to modify: AppState#45.isSignedIn
If I comment out that getter - warning disappear. Why could this happen?
object
object V2RayServiceManager {
//get live data from here
}
class MainActivity : BaseActivity() {
//recieve live data here
}
**
have tried using eventBus but doesn't work not receiving data**
Best way to approach is by using Reactive way
object V2RayServiceManager {
fun getSource(): Observable {
return Observable.create{ emitter ->
emitter.onNext(10);
emitter.onNext(11);
}
}
}
Whenever source emits value like source.onNext(11) it will call who subscribed this source for example activity in your case.
MainActivity:
V2RayServiceManager.source.subscribe { data ->
// You will receive 10 and 11
}
When ever someone call sendData with value. It will trigger who ever subscribed this subject
I have a class & I want to make the whole class as observable & then I am going to create the instance of that class & then it will be stored in the context, so before storing it I need that class as observable, so I can observe for any change:
class PrimitiveContext {
currentPageId: number;
primitiveValue: string = 'Testval';
constructor(
#inject(OBS_IT.CurrentPageId) currentPageId: number) {
this.currentPageId = currentPageId;
this.updateValue = this.updateValue.bind(this);
}
getValue() {
return this.primitiveValue;
}
}
// Context
const primitive = createContext(new PrimitiveContext())
Above is the sample code, how can I make PrimitiveContext as observable.
Try to use https://github.com/farwayer/mobx-decorators#allobservable
I use it in my projects, but it does't support mobx 5+ version
I have a class Two with a bunch of functions inside. Some of them are using this.setState({}) and they throw me a warning: setState(...): Can only update a mounted or mounting component.
Here's an example of the code:
class One extends React.Component {
constructor() {
super()
this.two = new Two;
}
componentDidMount() {
this.two.hello()
}
render() {
return (<View><Text>Hello World!</Text></View>)
}
}
class Two extends React.Component {
constructor() {
super()
this.state = {
connected: false
}
}
hello() {
this.setState({connected: true}) //This one throw the warning
}
}
Is there any way to do things in a better way? Since my class Two is functionnal, I would like to not change the code too much to have things working. Btw, I need to the this.two = new Two line.
Should I create a library, a module, or whatever? If so, can you give me a good tutorial?
If you are not mounting the Component, React can’t update it’s state using it’s built-in state handler.
And since you are not mounting it, it should probably not be a react component at all. Try using a regular class instead:
class Two {
constructor() {
super()
this.state = {
connected: false
}
}
hello() {
this.state.connected = true
}
}
The main problem here is you are trying to make components in React communicate in an unconventional way.
The way you want to go about this is to make use of props. This is how components talk to each other in React, instead of being direct, like you're attempting.
Check out my code here where I'm doing the same as you
Basically, I've written 2 examples in 1 here. The first is passing just raw data through to another component. (this.props.data.someData). And the second, which is more like what you're wanting to do, is using React's Life Cycle methods, to listen for when a function should run, through prop activation.
What this means in my example, is when the runFunction prop is passed into Two, either when it's first created componentDidMount() or when set to true later componentWillRecieveProps(), it will run the testFunction()