“Toasts”应该在哪里居住在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 });
    }
}

但是我开始认为toasts处理应该存在于商店的异步try-catch而不是视图中，而是它的混合业务逻辑与视图，所以我不确定。

有什么建议吗？

Answer 1

我认为消息 是应用程序的一部分。 在我的应用程序中，我在根级别有一个数组

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条消息＆＃39;如果你错过了

，可能会有用的东西

Answer 2

猜猜这不是特定于mobx或mobx-state-tree，但我可能会考虑在图片中添加专用的NotificationStore。 Service try / catch / finally将是一个源service的通知生成器，另一个可能是源transport的fetch / xhr包装器。 由业务逻辑来决定如何呈现/处理这些。