MobX의 이벤트 : 상점 동작에서 뷰 호출 방법

Question

MobX에서 저장소의 비동기 동작에서 뷰 방식을 어떻게 호출합니까? 예를 들어,이 같은 코드를 가지고 :

@action 
someAction() { 
    longOperation() 
    .then(() => { }) 
    .catch(error => { }); 
} 

함수가 성공 또는 실패

가보기에 몇 가지 방법은 예를 들어, 쇼 오류 대화 상자, 전화 또는 Navigator에 push 메소드를 호출해야합니다.

현재 저는 생각합니다 : 상태로 매장에서 관찰 가능 필드를 생성하십시오. 상태가 변경되면 내보기의 render 메소드가 호출되며 발생한 작업을 처리하고 저장소의 상태를 재설정 할 수 있습니다.

그러나이 아이디어를 구현할 때 더 좋은 변종이 있습니까?

Answer 1

return the promise from the action and just do what you want once it has resolved 수 있습니다.

예

function longOperation() { 
    return new Promise(resolve => setTimeout(resolve, 3000)); 
} 

class Store { 
    @observable data = 'foo'; 
    @action 
    someAction() { 
    return longOperation() 
     .then(() => this.data = 'bar') 
     .catch(e => console.log(e)); 
    } 
} 

const store = new Store(); 

@observer 
class App extends React.Component { 
    @observable stuff = 'test'; 
    onClick =() => { 
    store.someAction().then(() => this.stuff += '!'); 
    }; 
    render() { 
    return (
     <div onClick={this.onClick}> 
     {`${this.stuff} ${store.data}`} 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <App />, 
    document.getElementById('app') 
);