Question

我对如何使用React以及构建我自己的框架有自己的意见，受到Om的启发。我正在实现一些类似于Flux架构的东西，其中的商店可以在某些事件上自行更新。

我不确定理解为什么在Flux架构中我们需要存储依赖项？

对于特定的有界环境，商店不应该是自包含的数据持有者，就像我们使用CQRS架构一样？

在一个事件系统中，2个CQRS组件可能最终保留相同的数据。我们是否表达商店依赖关系以避免在商店中存储重复数据？

有人可以提出一些非常具体的用例，其中需要存储依赖关系并且问题难以以任何其他方式解决吗？我找不到任何自己。

Answer 1

在refluxjs中，我们以两种方式解决waitFor，一种用于顺序数据流，另一种用于并行数据流。我尝试以避免保存相同数据的方式对数据存储建模（即双重维护数据）。

基本上，数据存储是CQRS组件，我尽量避免让2个数据存储以相同类型的数据结束。如果我需要以某种方式转换数据只有一些组件需要，我将其分解为“聚合”数据存储。天真的实施：

var carsStore = Reflux.createStore({
    init: function() {
        this.listenTo(Actions.updateCars, this.updateCallback);
    },
    updateCallback: function() {
        $.ajax('/api/cars', {}).done(function(data) {
            this.trigger(data.cars);
        }.bind(this));
    }
});

我们可以通过收听carsStore：

来创建另一个聚合数据的数据存储

var modelsStore = Reflux.createStore({
    init: function() {
        this.listenTo(carsStore, this.carsCallback);
    },
    carsCallback: function(cars) { // passed on from carsStore trigger
        this.trigger(this.getModels(cars)); // pass on the models
    }
    getModels: function(cars) {
        return _.unique(_.map(cars, function(car) { return car.model; }));
    }
});

这样，您的React视图组件可以使用一个来获取汽车而另一个获取模型，这些模型是从carStore汇总的。

如果商店需要等待两个并行数据流完成，我们提供Reflux.all加入行动和商店。这很有用，例如如果您正在等待从单独的不同REST资源加载数据。

var carsAndPartsAreLoaded = Reflux.all(carStore, partsStore);

// you may now listen to carsAndPartsAreLoaded 
// from your data stores and components

希望这对你有意义。

Answer 2

我终于构建了一个类似于Flux商店的应用程序而没有任何依赖。

最近Dan Abramov创建了一个框架(Redux)，它突出了flux存储可组合性，而不需要任何商店依赖或waitFor，我分享了他的大多数想法

对React的Flux架构感到困惑 - waitFor

2 个答案: