mobx - 查看商店逻辑

我有一个关于mobx + react的非常大的应用程序，许多组件在store上调用相同的操作。例如，“删除照片”，可以从照片列表或模式中调用。但在执行动作之前，我有，例如，显示确认模式...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> 
})

你是什么东西？那可以吗？

非常感谢！

来源

2016-09-25 Maximiliano Guzenski

看起来不错。也许是一个错字。应该是'photoStore.destroy（照片）' – vijayst

也是PhotoView的父组件应该是'@ observer'。 – vijayst

是的，这只是一个例子;）我会修复它 –

要避免使用模型逻辑的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-25 14:08:15 vijayst

是的，好的...但是如果我必须从另一个组件调用相同的动作，我会复制handleDelete ...或将其移动到组件的高位结构并将其传递下去 –

这取决于。 handleDelete和Button/Div可以组合在一起形成另一个组件。 – vijayst

而不是

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

您可以添加一个可观察到在那里存储和修改它。你的模态代码可以住在其他地方，并成为观察者

来源

2016-11-03 06:44:27

mobx - 查看商店逻辑

回答

相关问题