「トースト」はMobx State Treeにどこに住んでいますか？

Question

マイ非同期アクションは、次のようなものに見える傾向：

anAsyncAction: process(function* anAsyncAction() { 
    self.isLoading = true; 
    const service = getEnv<IMyMarksPageStoreEnv>(self).myService; 
    try 
    { 
     yield service.doSomething(); 
    }   
    finally 
    { 
     self.isLoading = false; 
    } 
}), 

それから私は、ビューを表示するために乾杯何を処理させる：

toaster = Toaster.create({ 
    position: Position.TOP 
}); 

render() { 
    return <button disabled={this.props.store.isLoading} onClick={this.handleButtonClicked}>Do Async Thing</button> 
} 

handleButtonClicked =() => { 
    const store = this.props.store; 
    try 
    { 
     await store.anAsyncAction(); 
     toaster.show({ message: "Saved!", intent: Intent.SUCCESS }); 
    } 
    catch(e) 
    { 
     toaster.show({ message: "Whoops an error occured: "+e, intent: Intent.DANGER }); 
    } 
} 

しかし、イム乾杯することを考え始めて処理はストアではなくビューの非同期的なtry-catchに存続するはずですが、次にビューとのミキシングのビジネスロジックがあるので、わかりません。

提案がありますか？

Answer 1

mobxやmobx-state-treeに固有のものではないと思われますが、おそらく専用のNotificationStoreを画像に追加することを検討しています。 Service try/catch/finallyは、送信元がserviceの通知の1つのプロデューサ、もう1つはソースがtransportのfetch/xhrラッパーです。 それらを表示/処理する方法を決定するのはビジネスロジック次第です。

Answer 2

私は、メッセージがアプリケーションの一部であると主張します。私のアプリで 私はルートレベルの配列

export default types.model('AppStore', { 
    .... 
    flashMessages: types.optional(types.array(FlashMessage), []), 
}) 
    .actions((self) => { 
    /* eslint-disable no-param-reassign */ 
    const addFlashMessage = (message) => { 
     self.flashMessages.push(FlashMessage.create({ 
     ...message, 
     details: message.details.toString(), 
     })); 
    }; 

    function addErrorMessage(text, details = '') { 
     addFlashMessage({ type: 'error', text, details }); 
    } 

    function addInfoMessage(text, details = '') { 
     addFlashMessage({ type: 'info', text, details }); 
    } 

    function addSuccessMessage(text, details = '') { 
     addFlashMessage({ type: 'success', text, details }); 
    } 

その後

@inject('appStore') 
@observer 
class App extends Component { 
    render() { 
    const app = this.props.appStore; 

    return (
     <BlockUI tag="div" blocking={app.blockUI}> 
     <Notifications messages={app.unseenFlashMessages} /> 
    ... 

とコンポーネントで

this.props.appStore.addSuccessMessage(`User ${name} saved`); 

これはまた、あなたが「最後の5つのメッセージ」を実装することができますを持っていますあなたが欠席してしまった場合に役立つかもしれないものの種類