助焊剂:如何使商店等待行动? [英] Flux: How to make an action wait for a store?
问题描述
我将自己与一个React问题打成一片，这肯定不会像现在看来那样困难.
I'm tying myself in knots with a React problem which I'm sure can't be as difficult as it seems to me right now.
我正在针对返回资源的RESTful服务器API构建单个页面的应用程序，并提供描述该资源可以做什么的链接.而且我正在尝试确保客户端的ajax调用仅使用以这种方式从服务器检索的URL.因此，例如，我的LoggedInSessionStore包含允许我获取所有公共文档列表的URL.
I'm building a single page app against a RESTful server API that returns resources, together with links that describe what can be done with that resource. And I'm trying to ensure that my client's ajax calls only use URLs retrieved from the server in this way. So, for example, my LoggedInSessionStore contains the URL that allows me to fetch the list of all public documents, say.
我的问题是如何管理动作和存储之间的依赖关系.例如，当获取所有公共文档的操作触发时，它需要从LoggedInSessionStore获取其URL.但是该商店可能尚未有人居住.因此在上一个操作(获取登录会话)完成之前，不得触发该操作.
The problem I have is how to manage the dependencies between actions and stores. For example, when the action to fetch all public documents fires, it needs to get its URL from the LoggedInSessionStore. But that store may not yet have been populated yet; so the action must not fire until a previous action (fetch the login session) has completed.
因此，我想要一个可以使用存储在商店中的URL来获取服务器数据的操作.确保该操作在该商店被填充之前不会触发的可接受的方法是什么?
So, I want an action that can fetch server data using a URL that is stored in a store. What is the accepted way to ensure that the action cannot fire until that store has been populated?
推荐答案
TL; DR 请勿将URL存储在商店中.让您的操作处理API调用.
TL;DR Don't store your URLs in your Stores. Let your actions handle API calls.
通常，使用Flux时，您的操作不应了解您的商店. Flux应用程序中的数据旨在沿一个方向流动:
In general when using Flux your actions should not know about your stores. Data in a Flux application is meant to flow in one direction:
Components --> Actions --> Dispatcher --> Stores --> Components
您的React组件创建动作，然后由Dispatcher调度到您的商店.商店将通过其注册的回调通知这些操作，并相应地进行更新.组件将侦听商店进行自我更新，并且它们将相应地更新自己的状态.这样圆就完成了.
Your React components create actions, which are then dispatched by the Dispatcher to your stores. Stores will be notified of the actions via their registered callback and will update themselves accordingly. Components will listen for stores to update themselves and they will update their own state accordingly. Thus the circle is completed.
重点是:操作不应取决于商店
我建议您将所有API逻辑都付诸行动.这包括您的API的URL.这是在Flux应用程序中很常见的模式:
What I would suggest is that you move all your API logic into actions. This includes the URLs for your API. This is a fairly common pattern in Flux applications:
- 组件触发对
componentDidMount的提取操作.显示加载微调框，因为它尚未具有需要呈现的数据. - fetch操作进行AJAX调用以从服务器获取数据.
- 当数据从服务器返回时，该操作会将其作为有效负载分派
- 商店看到有效负载并根据获取的数据设置其内部状态
- 该组件看到商店已更新，并相应地更新了其自己的状态.这将导致它呈现应用程序，而不仅仅是加载微调器.
- A component triggers a fetch action on
componentDidMount. Displays loading spinner since it does not yet have the data it needs to render. - The fetch action makes an AJAX call to fetch data from the server.
- When the data comes back from the server, the action dispatches it as a payload
- A store sees the payload and sets its internal state based on the fetched data
- The component sees that the store has been updated, and updates its own state accordingly. This causes it to render the app instead of just a loading spinner.
另一种选择是将获取逻辑包含在商店内部，包括AJAX请求代码.我发现前者更容易推论(商店一无所知，它们只是在数据可用时对数据做出反应)，但是由您决定如何实现它.只需确保API提取逻辑只在一个地方 ，而不是在Actions和Stores之间分配.
An alternative option is have your fetch logic inside your stores, including the AJAX request code. I find the former easier to reason about (stores know nothing, they just react to data when its available) but it's up to you how you want to implement it. Just make sure that the API fetching logic is in one place only, not split between Actions and Stores.
此线程可能也有帮助:应该通量商店或操作(或两者)接触外部服务?
This thread may also be helpful: Should flux stores, or actions (or both) touch external services?
这篇关于助焊剂:如何使商店等待行动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
