mobx - просмотр логики по магазинам

У меня есть очень большое приложение на 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>
})

Что так? это нормально идти?

большое спасибо!


reactjs mobx
person Maximiliano Guzenski    schedule 25.09.2016    source источник
comment
выглядит неплохо. Может опечатка. должно быть photoStore.destroy(photo)   -  person vijayst    schedule 25.09.2016
comment
также родительский компонент PhotoView должен быть @observer.   -  person vijayst    schedule 25.09.2016
comment
да это всего лишь пример;) исправлю   -  person Maximiliano Guzenski    schedule 25.09.2016

Ответы (2)


arrow_upward
0
arrow_downward

Чтобы избежать логики пользовательского интерфейса с логикой модели, код можно упростить следующим образом.

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);
  });
}
person vijayst    schedule 25.09.2016
comment
Да, хорошо ... но если мне нужно вызвать то же действие из ДРУГОГО компонента, я реплицирую handleDelete ... или перемещаю его высоко в структуре моего компонента и передаю его вниз - person Maximiliano Guzenski; 25.09.2016
comment
По-разному. handleDelete и Button / Div могут быть сгруппированы вместе, чтобы сформировать другой компонент. - person vijayst; 25.09.2016

arrow_upward
0
arrow_downward

Вместо

notificationStore.showSuccess ('ваша фотография была удалена!')

Вы можете добавить наблюдаемое, чтобы сохранить и изменить его там. Ваш модальный код может жить где-то еще и быть наблюдателем

person Peter Gelderbloem    schedule 03.11.2016