Wie kann man mobx-react Provider Geschäfte hinzufügen, wenn sie voneinander abhängig sind?

Question

Was ist die beste Vorgehensweise beim Initialisieren eines Geschäfts basierend auf einem anderen und setzen Sie beide in Provider? Ich habe ein Geschäft namens AuthManager es besitzt eine beobachtbare Eigenschaft namens user. Ich habe auch ein anderes Geschäft namens GoalManager. Ich brauche die user Eigenschaft von AuthManager, GoalManager zu initialisieren. möchte ich GoalManager so konstruieren:

const goalManager = new GoalManager(user); 

Aber es ist nicht möglich, etwas hinzuzufügen, später in den Kontext reagieren, weil einige Kinder können nicht auf Änderungen von kontextbasierten Update! Ich löste dieses Problem, indem AuthManager Instanz GoalManager ‚s Konstruktor zu senden, aber ich mag es nicht:

// services.js 

const authManager = new AuthManager(); 
const goalManager = new GoalManager(authManager); 

export default { 
    authManager, 
    goalManager 
} 

und später:

// index.jsx 

import services from './services'; 

render(` 
    <Provider {...services}> 
    <App /> 
    </Provider>`, mountPoint); 

ich diese Lösung nicht gefällt, weil ich hatte abhängig von GoalManager bis AuthManager aber es hängt nur von AuthManager.user ab. Dann ist das Testen von GoalManager schwieriger (weil Sie ein großes Objekt vortäuschen müssen).

Gibt es dafür eine bessere Lösung?

Answer 1

Vielleicht eine ganz andere Art zu denken, aber das würde Ihr Problem lösen.

Es sieht aus wie, würde dies auch für Sie arbeiten:

// AuthManager.js 
class AuthManager { 
    @observable user; 
} 

export default new AuthManager(); 

Und importieren nur AuthManager in GoalManager AuthManger.user

// GoalManager.js 

// import the AuthManager and use the user directly. 
import AuthManager from './AuthManager' 

class GoalManager { 
    @computed get someThing() { 
    if (AuthManager.user) { 
     // your stuff.. 
    } 
    } 
} 

export default new GoalManager(); 

in Dienste nutzen Sie die Instanzen so erhalten werden.

// services.js 

import authManager from './AuthManager' 
import goalManager from './GoalManager' 

export default { 
    authManager, 
    goalManager 
} 

Haben Sie die Idee?