javascript - Flux - 直接调用 store 的组件

Question

花了一些时间使用 flux(包括“vanilla”和各种框架，包括 alt 和 fluxible)后，我对加载组件初始状态的最佳实践留下了疑问。更具体地说，是关于直接访问商店的组件。

通量“模型”在循环中规定了来自 Action>Dispatcher>Store>View 的单向数据流，但在加载组件的初始状态时似乎回避了这种约定，大多数文档/教程包含示例而不是触发一个 Action 来获取数据，组件直接调用商店上的一个函数(下面的例子)。

在我看来，组件应该很少/没有关于商店的信息，只有关于它们可以触发的操作的信息，所以引入这个链接似乎既不直观又具有潜在危险，因为它可能会鼓励 future 的开发人员直接跳转到商店从组件而不是通过调度程序。这也违背了 Flux 应该非常严格遵守的“得墨忒耳法则”。

这方面的最佳做法是什么？这似乎总是如此，这是有原因的吗？很可能我错过了一些基本的东西，所以如果是的话请告诉我!

谢谢。

---

直接调用商店的组件示例。

来自 fb flux repo 示例聊天应用程序 (https://github.com/facebook/flux/tree/master/examples/flux-chat) 的 Flux React 示例

MessageSection.react.js

getInitialState: function() {
    return getStateFromStores();
},


function getStateFromStores() {
    return {
        messages: MessageStore.getAllForCurrentThread(),
        thread: ThreadStore.getCurrent()
    };
}

TODOapp 的同一个仓库中的另一个例子( https://github.com/facebook/flux/tree/master/examples/flux-todomvc )

TodoApp.react.js

function getTodoState() {
    return {
        allTodos: TodoStore.getAll(),
        areAllComplete: TodoStore.areAllComplete()
    };
}

上述待办事项应用的替代实现示例:( https://github.com/goatslacker/alt/tree/master/examples/todomvc )

TodoApp.js

function getTodoState() {
    return {
        allTodos: TodoStore.getState().todos,
        areAllComplete: TodoStore.areAllComplete()
    };
}

最后是 alt 特定教程:( https://github.com/goatslacker/alt-tutorial/blob/master/src/components/Locations.jsx )

Locations.js

componentDidMount() {
    LocationStore.fetchLocations();
},

Answer 1

这取决于您的应用程序的结构。通常您希望在向用户显示某些内容之前获取一些数据。我发现一个好的做法是拥有一个高端组件，它在挂载一个从 API 获取任何初始数据的操作时触发。这意味着当此操作完成获取时，它会调用缓存数据的存储，然后发出更改。然后，此更改会启动整个应用程序的重新渲染。

这样您就可以保持单向数据流。 Flux 的全部意义在于让用户从组件中提取数据流功能以保持它们更干净，不鼓励组件直接相互通信并减少必须在应用程序周围传递的不必要属性的数量。

在示例中，初始状态从存储中获取一些初始值。这是获取初始值的常用方法，但您也可以在组件中设置它。我会说这两种方式都是一种很好的做法。这并不意味着每个组件都可以自由地从商店中获取他们喜欢的任何东西。

无论如何，目标是使用 Flux 使代码和数据流尽可能直观。所有这些都是 Flux 实现如此之多的原因。