2

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

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

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>
})

你怎么了？可以去吗？

多谢！

4

2 回答 2

0

代替

notificationStore.showSuccess('你的照片被删除了！')

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

于 2016-11-03T06:44:27.237 回答
0

为了避免 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);
  });
}
于 2016-09-25T14:08:15.660 回答