Styjun

Why doesn't Dany protect her dragons better?

Crime rates in a post-scarcity economy

How can it be that ssh somename works, while nslookup somename does not?

Sprout Reports plugin - How to output a Matrix field into a row

Align a table column at a specific symbol

Examples where existence is harder than evaluation

Add elements inside Array conditionally in JavaScript

mini sub panel?

Why are thrust reversers not used down to taxi speeds?

Where do 5 or more U.S. counties meet in a single point?

When an electron around an atom drops to a lower state, is 100% of the energy converted to a photon?

Why doesn't increasing the temperature of something like wood or paper set them on fire?

Company stopped paying my salary. What are my options?

Does this website provide consistent translation into Wookiee?

Whose birthyears are canonically established in the MCU?

Opposite party turned away from voting when ballot is all opposing party

Are wands in any sort of book going to be too much like Harry Potter?

How would an instant or sorcery with an effect that targets work with Feather?

I'm attempting to understand my 401k match and how much I need to contribute to maximize the match

How can I test a shell script in a "safe environment" to avoid harm to my computer?

What computer port is this?

My perfect evil overlord plan... or is it?

Would the rotation of the starfield from a ring station be too disorienting?

I need some help understanding the grammar of しのげそうな in この寒さをしのげそうな防寒服を手渡され

Type hinting vs. Circular reference in JavaScript

What is the difference between loose coupling and tight coupling in the object oriented paradigm?Create GUID / UUID in JavaScript?How do JavaScript closures work?What is the most efficient way to deep clone an object in JavaScript?How do I remove a property from a JavaScript object?Which equals operator (== vs ===) should be used in JavaScript comparisons?How do I include a JavaScript file in another JavaScript file?What does “use strict” do in JavaScript, and what is the reasoning behind it?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?For-each over an array in JavaScript?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I'm trying to create a set of classes that all need to access each other. Following the MobX guide, I would like to have my structure as such:

RootStore
├─ ApplicationStore
├─ UserStore
├─ EventStore
└─ ...Store

Now if I construct each Store with RootStore parameter, I can look up events for user etc. All is good, application works but Jest test explodes when I want to use type hinting:

RootStore.js

import UserStore from './UserStore.mobx'
import ApplicationStore from './ApplicationStore.mobx'

export default class RootStore 
 userStore: UserStore
 appStore: ApplicationStore

UserStore.js

import RidersProvider from '../providers/RidersProvider'
import RootStore from './RootStore.mobx'

export default class UserStore {
 provider: RidersProvider
 rootStore: RootStore
 @observable _users = []

 constructor (rootStore: ?RootStore, userProvider: ?RidersProvider) 
 this.rootStore = rootStore
 this.provider = userProvider
 
 ...

Now if I remove the imports in UserStore, it all works fine, but then I get no type hinting. Is there a good solution to this? I've spent days going through articles on circular references (and losing my mind) but I couldn't find a clue how to properly fix this.

The reference issue I have is as follows:
Require cycle: src/Connection.js -> stores/RootStore.singleton.js -> stores/RootStore.mobx.js -> stores/UserStore.mobx.js -> providers/RidersProvider.js -> src/Connection.js

So Connection uses RootStore to access ApplicationStore.accessToken, which is required to get user detail in UserStore. At this point I could just get rid of RootStore which is mentioned in MobX best practices though, unless I misunderstood the concept.

But the problem isn't as much with the RootStore but the fact that if I want to type hint using provider: RidersProvider it fails. In PHP I would have just used a ProviderInterface (and StoreInterface) and never run into a circular dependency but in JS I don't see an alternative other than TypeScript, but is there one?

javascript ecmascript-6 ecmascript-7

share|improve this question

edited Mar 23 at 19:37

kachnitel

asked Mar 23 at 7:06

kachnitelkachnitel

117515

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It seems a bad idea to have all classes referencing all others. stackoverflow.com/questions/2832017/…
  
  – Slim
  Mar 23 at 7:15
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Absolutely and if I was working in an actual object oriented language I probably wouldn't have this problem, I see many topics on this issue in Python, but I can't figure out how to achieve loose coupling in JS. I'd love to use interfaces, but...
  
  – kachnitel
  Mar 23 at 7:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is it really a business need to have all stores referencing each others? Can't you design it in a tree way?
  
  – Slim
  Mar 23 at 7:32
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That's a topic I haven't covered yet, would mobx-state-tree be a good place to start?
  
  – kachnitel
  Mar 23 at 8:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Sure, but it's more about you, what do you want to achieve functionnally. Maybe you can draw a diagram listing all possible actions and desired results, and imagine AFTER how to implement it technically, knowing circular references should be avoided.
  
  – Slim
  Mar 23 at 8:27
  
  

  
  
  
  

 | 
show 5 more comments

0

I'm trying to create a set of classes that all need to access each other. Following the MobX guide, I would like to have my structure as such:

RootStore
├─ ApplicationStore
├─ UserStore
├─ EventStore
└─ ...Store

Now if I construct each Store with RootStore parameter, I can look up events for user etc. All is good, application works but Jest test explodes when I want to use type hinting:

RootStore.js

import UserStore from './UserStore.mobx'
import ApplicationStore from './ApplicationStore.mobx'

export default class RootStore 
 userStore: UserStore
 appStore: ApplicationStore

UserStore.js

import RidersProvider from '../providers/RidersProvider'
import RootStore from './RootStore.mobx'

export default class UserStore {
 provider: RidersProvider
 rootStore: RootStore
 @observable _users = []

 constructor (rootStore: ?RootStore, userProvider: ?RidersProvider) 
 this.rootStore = rootStore
 this.provider = userProvider
 
 ...

Now if I remove the imports in UserStore, it all works fine, but then I get no type hinting. Is there a good solution to this? I've spent days going through articles on circular references (and losing my mind) but I couldn't find a clue how to properly fix this.

The reference issue I have is as follows:
Require cycle: src/Connection.js -> stores/RootStore.singleton.js -> stores/RootStore.mobx.js -> stores/UserStore.mobx.js -> providers/RidersProvider.js -> src/Connection.js

So Connection uses RootStore to access ApplicationStore.accessToken, which is required to get user detail in UserStore. At this point I could just get rid of RootStore which is mentioned in MobX best practices though, unless I misunderstood the concept.

But the problem isn't as much with the RootStore but the fact that if I want to type hint using provider: RidersProvider it fails. In PHP I would have just used a ProviderInterface (and StoreInterface) and never run into a circular dependency but in JS I don't see an alternative other than TypeScript, but is there one?

javascript ecmascript-6 ecmascript-7

share|improve this question

edited Mar 23 at 19:37

kachnitel

asked Mar 23 at 7:06

kachnitelkachnitel

117515

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It seems a bad idea to have all classes referencing all others. stackoverflow.com/questions/2832017/…
  
  – Slim
  Mar 23 at 7:15
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Absolutely and if I was working in an actual object oriented language I probably wouldn't have this problem, I see many topics on this issue in Python, but I can't figure out how to achieve loose coupling in JS. I'd love to use interfaces, but...
  
  – kachnitel
  Mar 23 at 7:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is it really a business need to have all stores referencing each others? Can't you design it in a tree way?
  
  – Slim
  Mar 23 at 7:32
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That's a topic I haven't covered yet, would mobx-state-tree be a good place to start?
  
  – kachnitel
  Mar 23 at 8:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Sure, but it's more about you, what do you want to achieve functionnally. Maybe you can draw a diagram listing all possible actions and desired results, and imagine AFTER how to implement it technically, knowing circular references should be avoided.
  
  – Slim
  Mar 23 at 8:27
  
  

  
  
  
  

 | 
show 5 more comments

I'm trying to create a set of classes that all need to access each other. Following the MobX guide, I would like to have my structure as such:

RootStore
├─ ApplicationStore
├─ UserStore
├─ EventStore
└─ ...Store

Now if I construct each Store with RootStore parameter, I can look up events for user etc. All is good, application works but Jest test explodes when I want to use type hinting:

RootStore.js

import UserStore from './UserStore.mobx'
import ApplicationStore from './ApplicationStore.mobx'

export default class RootStore 
 userStore: UserStore
 appStore: ApplicationStore

UserStore.js

import RidersProvider from '../providers/RidersProvider'
import RootStore from './RootStore.mobx'

export default class UserStore {
 provider: RidersProvider
 rootStore: RootStore
 @observable _users = []

 constructor (rootStore: ?RootStore, userProvider: ?RidersProvider) 
 this.rootStore = rootStore
 this.provider = userProvider
 
 ...

Now if I remove the imports in UserStore, it all works fine, but then I get no type hinting. Is there a good solution to this? I've spent days going through articles on circular references (and losing my mind) but I couldn't find a clue how to properly fix this.

The reference issue I have is as follows:
Require cycle: src/Connection.js -> stores/RootStore.singleton.js -> stores/RootStore.mobx.js -> stores/UserStore.mobx.js -> providers/RidersProvider.js -> src/Connection.js

So Connection uses RootStore to access ApplicationStore.accessToken, which is required to get user detail in UserStore. At this point I could just get rid of RootStore which is mentioned in MobX best practices though, unless I misunderstood the concept.

But the problem isn't as much with the RootStore but the fact that if I want to type hint using provider: RidersProvider it fails. In PHP I would have just used a ProviderInterface (and StoreInterface) and never run into a circular dependency but in JS I don't see an alternative other than TypeScript, but is there one?

javascript ecmascript-6 ecmascript-7

share|improve this question

edited Mar 23 at 19:37

kachnitel

asked Mar 23 at 7:06

kachnitelkachnitel

117515

RootStore
├─ ApplicationStore
├─ UserStore
├─ EventStore
└─ ...Store

import UserStore from './UserStore.mobx'
import ApplicationStore from './ApplicationStore.mobx'

export default class RootStore 
 userStore: UserStore
 appStore: ApplicationStore

import RidersProvider from '../providers/RidersProvider'
import RootStore from './RootStore.mobx'

export default class UserStore {
 provider: RidersProvider
 rootStore: RootStore
 @observable _users = []

 constructor (rootStore: ?RootStore, userProvider: ?RidersProvider) 
 this.rootStore = rootStore
 this.provider = userProvider
 
 ...

share|improve this question

edited Mar 23 at 19:37

kachnitel

asked Mar 23 at 7:06

kachnitelkachnitel

117515

share|improve this question

edited Mar 23 at 19:37

kachnitel

asked Mar 23 at 7:06

kachnitelkachnitel

117515

asked Mar 23 at 7:06

kachnitelkachnitel

117515

asked Mar 23 at 7:06

kachnitelkachnitel

117515