Question

花了一些时间使用助焊剂（包括'香草＆＃39;以及各种框架，包括alt和fluxible），我留下了关于加载组件初始状态的最佳实践的问题。更具体地说，是关于直接访问商店的组件。

通量'模型'规定了来自Action＆gt; Dispatcher＆gt; Store＆gt; View的循环中的单向数据流，但似乎在加载组件的初始状态时避免使用此约定，大多数docs / tutorials包含示例而不是触发一个动作来获取数据，该组件直接在商店中调用一个函数（下面的例子）。

在我看来，组件应该很少/没有关于商店的信息，只关于它们可以触发的操作，因此引入此链接似乎既不直观又有潜在危险，因为它可能会鼓励未来的开发人员直接跳到商店从组件而不是通过调度程序。它也违反了“因德米特法则”，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()
    };
}

上述待办事项应用的alt实现示例：（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

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

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

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

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

Flux - 直接调用存储的组件

1 个答案: