React的Flux架构让我感到困惑 - waitFor

Question

我有自己的看法，关于如何使用React并构建自己的框架，受到Om的启发。我正在实现类似于Flux架构的东西，具有可以在某些事件上更新自身的存储。

我不确定的是为什么在Flux架构中我们需要存储依赖关系？

存储不应该是给定边界上下文的自包含数据持有者，就像我们使用CQRS架构一样吗？

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

有人能提出一些非常具体的用例，需要存储依赖关系，并且问题几乎无法通过其他方式解决吗？我无法找到任何一个。

- Sebastien Lorber

---

你在这个问题上最终怎么样了？ - bentayloruk

@bentayloruk 请查看 https://github.com/stample/atom-react 。同时，Dan Abramov正在尝试使用存储组合而非依赖项（我也以某种方式这样做）。请参见 https://gist.github.com/gaearon/d77ca812015c0356654f。 - Sebastien Lorber

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

希望这对您有所帮助。

- Spoike

---

我们将研究如何在离线本地存储和 Web API 适配器中，使 CRUD 命令易于在 reflux 中处理。这很可能会成为一个扩展，因为 refluxjs 核心可以在服务器端（NodeJS）使用。 - Spoike

我认为复制数据实际上是解决Flux store之间不需要任何依赖关系以及不必处理存储同步的解决方案。您对此有什么看法？http://msdn.microsoft.com/en-us/library/bb245672.aspx - Sebastien Lorber

@SebastienLorber 为什么您感觉需要避免在存储之间存在依赖关系？Facebook 尝试通过 Flux 来减轻在组件中处理传递性数据的问题，这是错误的主要来源（根据视频）。Flux 中自动解决了 Web 应用程序内的数据同步，通过信号或传递 可预测单向流 中的数据来实现。 - Spoike

抱歉，我不明白您所说的“组件之间的传递性数据”，也不知道您指的是哪个视频的哪个部分。我认为制作自主存储也很可预测，因为存储事件成为真相来源，并且在大型代码库上更具可扩展性，因为在开发一个组件时，您不需要了解其他组件的工作方式，只需了解可以触发的业务事件。在您的Flux设计中，告诉我您从未想要重构一个存储并必须作为副作用重构另一个存储？ - Sebastien Lorber

@SebastienLorber 糟糕，我原本是指“派生数据”，他们在视频的14:00-17:00分钟讨论了这个使用案例。我认为我们对于store事件“成为真相之源”的理解是一致的。在 reflux 中，你通过订阅 actions 或者其他 stores 上的事件来连接组件（无论是 stores 还是 react 组件）。它们将从 store 接收事件数据而不知道其内部的操作，并且你不应该知道你正在监听的 stores 的确切接口。 - Spoike

Answer 2

我终于构建了一个类似于Flux存储库的应用程序，没有任何依赖关系。

最近，Dan Abramov创建了一个框架(Redux), 强调了Flux存储库的可组合性，而不需要任何存储库依赖或waitFor，我分享他的大部分想法。

- Sebastien Lorber