Question

我在mobx + react上有一个非常大的应用程序，其中许多组件在商店中调用相同的操作。例如，＆＃34;删除照片＆＃34;，可以从照片列表或模式中调用。但在执行我的行动之前，例如，要显示确认模式......

我最终得到了这个解决方案，但看起来我在混合数据登录视图逻辑...

class PhotoStore {
  @observable photos;

  @action destroy(photo) {
    if (currentUser.isGuest) {
      modalStore.open('NoGuest')
      return
    }

    modalStore.openConfirm(() => {
      // some datalogic
      api.delete('/photos/'+photo.id).then(() => {
        notificationStore.showSuccess('your photo was deleted!')
      })
    })
  }
}


const PhotoView = observer(({photo}) => {
  return <div onClick={() => photoStore.destroy(photo)}>...</div>
})

你是怎么回事？可以去吗？

非常感谢！

Answer 1

为避免使用模型逻辑的UI逻辑，可以将代码简化如下。

class PhotoView extends React.Component {
  handleDelete() {
    if (this.props.currentUser.isGuest) {
      modalStore.open('NoGuest');
      return;
    }

    modalStore.openConfirm(() => {
      // some datalogic
      photoStore.delete(this.props.photo).then(() => {
        notificationStore.showSuccess('your photo was deleted!');
      });
    });
  }

  render() {
    return <div onClick={this.handleDelete.bind(this)}>...</div>
  }
}

应修改PhotoStore上的删除功能：

@action delete(photo) {
  return new Promise((res, rej) => {
    api.delete('/photos/'+photo.id)
       .then(res)
       .catch(rej);
  });
}

Answer 2

而不是

notificationStore.showSuccess（'您的照片已被删除！'）

您可以添加一个observable来存储和修改它。您的模态代码可以存在于其他地方并成为观察者

mobx - 在商店上查看逻辑

2 个答案: