reactjs – 当一个React Flux商店发出多种事件时,这是否是一个很好的选择?

前端之家收集整理的这篇文章主要介绍了reactjs – 当一个React Flux商店发出多种事件时,这是否是一个很好的选择?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
几乎所有我发现的关于助焊剂的教程每个商店只会发生一个事件(emitChange)。我真的不知道,这是有意的,还是教程简单的结果。

我尝试实现一个对应于CRUD架构的商店,我想知道是否是一个很好的设计决定,为每个CRUD方法发出不同的事件。

我的一家商店的相关部分如下所示:

var UserStore = _.extend({},EventEmitter.prototype,{

    emitChange: function() {
        this.emit('change');
    },emitUserAdded: function() {
        this.emit('userAdded');
    },emitUserUpdated: function() {
        this.emit('userUpdated');
    },emitUserDeleted: function() {
        this.emit('userDeleted');
    },// addListener,removeListener in the same manner
});

如果我的方法错误的,我将如何告诉我的组件事件的类型,发生(例如:删除或更新)

作为设计模式的助焊剂建立在所有数据位于“存储”中的想法之上。每个商店保存给定信息域的数据。例如:在Flux中,所有注释将驻留在CommentStore中。

当数据在存储中更改时,它应该发出一个事件,并且构建在这个“信息域”之上的所有组件应该重新渲染并显示新的域数据。

我发现,当商店发布多个事件类型时,组件更有可能不监听该特定事件,因此在域数据更改时不会自动重新登录

这打破了整个通量模式,并且可以轻松地创建难以找到组件与商店信息不同步的错误

我建议您从“Demeter法”中设计您的组件 – 每个组件只应该知道它需要多少。

因此,您可以创建一个在单个存储事件上侦听的commentListComponent来代替监听“commentList已更新”的事件的组件。因此,组件将侦听commentStore.on(‘change’) – 我通常让所有商店发出一个’change’事件。当商店发出时,您应该在commenListComponent中复原数据以反映商店。如果您使用React,则可以使用setState。

var commentStore = _.extend({},{

updateComents: function() {
    // Update comments and emit
    this.emit('change');
},removeComments: function() {
    // Remove comments and emit
    this.emit('change');
},getState: function() {
    return {
        comments: this.comments,someOtherDomainData: this.Meta,}
}
});

//commentListComponent.js
var commentListComponent = React.createClass({
    componentDidMount : function() {
        commentStore.on('change',this._commentChanged);
    },componentWillUnmount : function() {
        commentStore.off('change',_commentChanged : function() { 
        this.setState({ comments : commentStore.getState().comments });
    },render : function() {
        var comments = // Build a list of comments.
        return <div>{comments}</div>
    }
})

这使得数据流更加简单,避免发现错误

猜你在找的React相关文章