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

Question

У меня очень большое приложение для взаимодействия с mobx +, когда многие компоненты вызывают те же действия в магазине. Например, «удалить фотографию» можно вызвать из списка фотографий или из модального. Но перед выполнением действия у меня есть, например, чтобы показать подтверждение modal ...

Я получаю это решение, но похоже, что я подключаю логин данных с логикой вида ...

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

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

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 ('ваша фотография была удалена!')

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