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

Question

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

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

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

API -> ActionCreator -> 商店 -> ActionCreator -> 视图

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

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

有人可以帮忙吗？

Answer 1

ActionCreator 不涉及存储和视图之间，仅在 server/store 或 views/server

之间

API -> ActionCreator -> 存储 ---binding_eventChange---> 视图 --actionCreator-->请求 ...等

对于我的 api，我为 api 的每个端点使用一个存储，这是一种数据类型。一个视图确实会绑定到许多商店（3,4,5stores ...等），这就是为什么我将视图切割成几个子视图，每个子视图绑定到一种类型的 data/store。所以我有一个大的父视图，它渲染了几个子视图，它允许简单的（子）视图易于阅读，它还使代码非常模块化，您可以轻松地组合子视图。

编辑：在您的评论示例中，您想要做的是：1.Loading 您的视图 2.Your 视图正在请求一种数据 3.your 存储接收请求的数据。 4.Your 视图，绑定到商店，使用新数据更新。

我会用伪代码快速写出来：

1.In您的看法：

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 = 函数() { MakeAjaxCall({ 成功：函数（数据）{ Dispatcher.handleViewAction({ 动作类型："SomeTypeofData"，结果：数据 }); }

}
Store：当 ajax 调用完成后，新数据被发送到 store

基本上，您正在使用 Dispatcher.register 并切换到 select 是您商店的正确操作（我让您查看了 flux 教程，但我想您已经知道了）。您还可以在注册新数据时绑定一个 'change' 事件（请参阅教程以及他们如何使用 EventEmitter 这很简单）。（这里的例子：https://facebook.github.io/flux/docs/todo-list.html#creating-stores）

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

我希望一切都清楚:)

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

Flux/ReactJS - One Store per API endpoint or One Store to all API endpoints?

flux

reactjs