mobx - “Toasts”应该住在 Mobx 状态树的什么位置？

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 条消息”之类的东西，如果您错过了一个 to

Answer 2

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