2017-01-05 10 views
1

다른 상점을 기반으로 상점을 초기화하고 두 가지를 모두 Provider에 넣는 것이 가장 좋습니다. AuthManager이라는 매장이 user이라는 관찰 가능한 속성을 소유하고 있습니다. 또한 나는 GoalManager이라는 또 다른 가게를 가지고있다. 을 초기화하려면 속성이 AuthManager이어야합니다.mobx-react 제공자가 서로 종속되어있을 때 상점을 추가하는 방법은 무엇입니까?

const goalManager = new GoalManager(user); 

그러나 일부 아이들이 환경의 변화에 ​​따라 업데이트 할 수 없기 때문에 이후에 뭔가를 추가의 문맥을 반응 할 수 없습니다 : 는이 같은 GoalManager를 구성 할! 나는 GoalManager의 생성자에 AuthManager 인스턴스를 보내이 문제를 해결,하지만 난 그것을 좋아하지 않아 : 나중에

// services.js 

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

export default { 
    authManager, 
    goalManager 
} 

과 : 내가했기 때문에 나는이 솔루션을 좋아하지 않아

// index.jsx 

import services from './services'; 

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

GoalManager ~ AuthManager에 의존하지만 AuthManager.user에만 의존합니다. 그런 다음 큰 물체를 조롱해야하므로 GoalManager을 테스트하는 것이 더 어렵습니다.

더 나은 해결책이 있습니까?

답변

0

어쩌면 완전히 다른 생각 일 수도 있지만 문제가 해결 될 수 있습니다.

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

export default new AuthManager(); 

을 그리고 당신이 인스턴스를 너무 얻을 것이다 서비스에 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(); 

를 사용하는 GoalManager에 AuthManager을 가져옵니다

그것은처럼 보이는

이 너무 당신을 위해 작동합니다.

// services.js 

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

export default { 
    authManager, 
    goalManager 
} 

아이디어가 있습니까?

+0

'GoalManager' 테스트 중 AuthManager를 조롱하는 방법은 무엇입니까? – Veikedo

+1

서버 측 렌더링은 어떻게됩니까? mobx 인스턴스는 별도의 HTTP 요청간에 공유되기 때문에 싱글 톤을 사용할 수 없습니다. 개인적으로이 문제는 다른 상점의 생성자에 새 인스턴스를 주입하여 같은 문제로 해결했지만 100 % 행복하지는 않습니다. – klis87

+0

렌더링을 위해 서버에서 mobx를 사용하지 않을 것입니다. 클라이언트 측의 멋진 반응 라이브러리입니다. mobx의 핵심 포인트는 초기 데이터로드가 아닌 반응 런타임입니다. – webdeb