Flux——直接调用store的组件

Flux - components calling store directly

本文关键字：组件 store Flux 调用      更新时间：2023-09-26

花了一些时间与flux(包括' vanilla'和各种框架，包括alt和flexible)一起工作，我留下了一个关于加载组件初始状态的最佳实践的问题。更具体地说，就是组件直接访问store来完成这个任务。

flux ' model '规定了在一个循环中从Action>Dispatcher>Store>View的单向数据流，但似乎在加载组件的初始状态时避免了这种惯例，大多数文档/教程包含的示例中，组件不是触发一个操作来获取数据，而是直接调用存储上的函数(示例如下)。

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

这方面的最佳实践是什么?有什么原因导致这种情况总是发生吗?很有可能我遗漏了一些基本的东西，所以如果是这样，请告诉我!

谢谢。

直接调用store的组件示例

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

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()
    };
}

上述todo应用程序的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();
},

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

这样可以保持单向数据流。Flux的重点是让用户从组件中提取数据流功能，以保持它们更干净，阻止组件之间直接通信，减少不必要的属性在应用程序中传递的数量。

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

无论如何，我们的目标是让Flux的代码和数据流尽可能的直观。所有这些都是为什么Flux有这么多实现的原因。
相关文章：