반작용 네이티브 MobX의 @observable 메인 <code>App.js</code> 얹는

Question

globalStore.js

import {observable} from 'mobx'; 

export default class globalStore { 
    @observable loggedIn = false; 
} 

항상 정의되지 "loggedIn"관찰 가능 :

관찰자

class LoginForm extends Component {/... 

render() { 
     console.log(this.props.store.loggedIn); 

결과 : undefined이

원하는 결과 : false

왜이 작동하지 않는 이유는 무엇입니까?

LoginForm 구성 요소를 래핑하는 제공 업체가 필요합니까? 어째서? 가게와 제공자의 App.js 내 전체 포장

는

중 하나

내가 당신 전역 저장소 클래스의 인스턴스를 볼 수

Answer 1

를 인스턴스화 할 수있을 .

이

class GlobalStore { 
    @observable loggedin = false; 
    ... 
} 

const store = new GlobalStore(); 
export default store; 

그럼 당신은 공급자를 사용합니다 : 다음 단계 당신이해야으로

@inject('globalStore') 
class LoginForm extends Component { 
... 

    render() { 
    console.log(this.props.globalStore.loggedIn); 
    ... 
    } 

:

import GlobalStore from './path/to/stores/GlobalStore'; 

<Provider 
    globalStore={GlobalStore} 
> 
    <AppRelatedContainers /> 
</Provider> 

마지막으로 당신이 로그인 폼에서 상점을 주입한다 나는이 방법을 수행 한 작업 솔루션으로 끝내십시오. 처음에 MobX를 사용하면 엉덩이에 통증이 생길 수 있습니다. 그러나 그 다음 그것은 위로 가게된다. 그리고 당신은 선의로 간다.

Answer 2

이

다음

import {observable} from 'mobx'; 

class globalStore { 
    @observable loggedIn = false; 
} 
const global_store=new globalStore(); // as a singleton class 
export default global_store; 

로그인 양식을 시도 작동하지 않습니다 아래와 같을 것입니다.

return (
      <LoginForm store={global_store} /> 
    ); 

먼저 당신이 당신의 GlobalStore에서 새 저장소를 만들어야합니다 당신은뿐만 아니라 당신의 로그인 폼에 내가 작업 구현에 다른 일을 한 내 관점에서 몇 가지가 있다고 생각