Flux/ReactJS -每个API端点一个Store或所有API端点一个Store

Question

我在规划我的ReactJS/Flux应用程序时遇到了一点混乱。它将与具有以下端点的WP Api挂钩:

/api/stores/
/api/posts/
/api/settings/

从构建的角度来看，什么是最好的方法?我目前的想法是:

API -> ActionCreator -> Store -> ActionCreator -> View

意味着在某些情况下，每个视图将包含最多三个存储的更改侦听器，并且可能会有大量重复的代码。

另一个选择是一个actionCreator到许多商店，但我不确定哪一个是最好的可扩展性。

有人能帮忙吗?

Answer 1

ActionCreator不涉及商店和视图之间，只涉及服务器/商店或视图/服务器之间

API -> ActionCreator -> Store -> binding_eventChange-> View -> ActionCreator ->request…等

对于我的api，我为api的每个端点使用一个存储，这是一种类型的数据。一个视图确实会绑定到许多商店(3,4,5商店……等等)，这就是为什么我把视图分成几个子视图，每个子视图绑定到一种类型的数据/商店。所以我有一个大的父视图，它渲染了几个子视图，它允许有简单的(子)视图易于阅读，它也使代码非常模块化，你可以很容易地合成子视图。

编辑:在你的例子中，你要做的是:1。加载视图2。您的视图正在请求数据类型3。您的商店接收请求的数据。4.绑定到存储的视图使用新数据进行更新。

我将用伪代码快速地写出来:

1。在你看来:

componentDidMount() {
   //calling your actioncreator to init the first call to the server
   ActionCreator.requestSomeTypeofData();
   // Set your store listener so your view can update when the data are here
   SomeTypeofDataStore.on('change', handler);
}
handler: function() {
    var data = SomeTypeofDataStore.getAll();
    this.setState({ data:data });
}

在你的actionCreator:

actionCreator。requestSomeTypeofData = function() {MakeAjaxCall ({成功:function(data) {Dispatcher.handleViewAction ({actionType:"SomeTypeofData",结果:数据});}

}

Store:当ajax调用完成后，新的数据被分派到Store

基本上你正在使用Dispatcher。注册和一个开关来为你的商店选择正确的动作(我让你看看flux教程，但我猜你已经知道了)。当你注册新数据时，你也绑定了一个'change'事件(参见教程以及他们如何使用EventEmitter，这很容易)。(示例:https://facebook.github.io/flux/docs/todo-list.html#creating-stores)

您的视图接收更新事件，调用处理程序注册新状态并使用新数据进行渲染

我希望这是清楚的:)