Question

我在规划ReactJS / Flux应用程序时遇到了一些困惑。它将挂钩到具有以下端点的WP Api：

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

从构建角度来看，最好的方法是什么？我现在的想法是：

API - ＆gt; ActionCreator - ＆gt;商店 - ＆gt; ActionCreator - ＆gt;视图（S）

这意味着在某些情况下，每个视图将包含最多三个商店的更改侦听器以及可能存在大量重复代码。

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

有人可以为此提供帮助吗？

Answer 1

仅在服务器/商店或视图/服务器

之间的商店和视图之间不涉及ActionCreator

API - ＆gt; ActionCreator - ＆gt; Store --- binding_eventChange ---＆gt;查看--actionCreator - ＆gt; request ... etc

对于我的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（{ 成功：函数（数据）{ Dispatcher.handleViewAction（{ 操作类型：“SomeTypeofData” 结果：数据 }）; }

}
存储：完成ajax调用后，将新数据分派到商店

基本上你使用Dispatcher.register和一个开关来为你的商店选择正确的动作（我让你看看助焊器教程，但我想你已经知道了）。您还可以在注册新数据时绑定“更改”事件（请参阅教程以及如何轻松使用EventEmitter）。（例如：https://facebook.github.io/flux/docs/todo-list.html#creating-stores）

您的视图收到更新事件，调用处理程序注册新状态并使用新数据重新呈现

我希望很清楚：）

Flux / ReactJS - 每个API端点一个商店或所有API端点的一个商店？

1 个答案: