mobx - 店舗のロジックを表示

Question

私はmobx +の反応で非常に大きなアプリを持っています。たとえば、「写真を削除する」は、写真の一覧から、またはモーダルから呼び出すことができます。しかし、私は行動を実行する前に、たとえば、確認モーダルを表示する...

私はこの解決策で結構ですが、私はmixinデータのビューロジックを使用しているようです...

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（ 'あなたの写真が削除されました！'）

が

あなたが追加することができますそこに保存して変更することが可能です。あなたのモーダルコードは他のどこかに住んでオブザーバーになれるかもしれません