stream量最佳实践:在Web API Utils中存储调度操作,AJAX调用?
我明白,这个图像已经成为大多数(如果不是全部的话)Flux程序员的最终指导。 考虑到这一点,我有几个问题:
- 我的Web API Utils中是否有所有
$.ajax
调用是正确的/强烈build议?- callback调用动作创build者,传递过程中的数据
- 如果我想让我的商店进行AJAX调用 ,我必须先调用Action Creator ,对吗? 直接从Store中调用Web API Utils中的函数从根本上说是不正确的?
- 有没有像从商店连接到动作创作者的虚拟单向箭头?
- 我有很多操作,没有通过意见
- 调度员和商店之间的callback是什么?
- 这里的Web API是什么? 这是你在哪里应用RESTful API? 有没有这个地方的例子?
-
在我的一个动作创作者中有一个涉及的逻辑(知道发送哪个动作 )可以吗? 基本上,这个动作接收来自我的AJAX调用的响应。 这是一个片段:
var TransportActions = { receiveProxyMessage: function (message, status, xhr) { switch (message) { case ProxyResponses.AUTHORIZED: AppDispatcher.dispatch({ type: ActionTypes.LOGIN_SUCCESS, reply: m }); break; case ProxyResponses.UNAUTHORIZED: AppDispatcher.dispatch({ type: ActionTypes.LOGIN_FAIL, reply: m }); break; ... } } }
我在网上看到了很多不同的答案,但我仍然不确定如何将其全部纳入我的应用程序。 TYIA!
我的Web API Utils中是否有所有$ .ajax调用是正确的/强烈build议? callback调用动作创build者,传递过程中的数据。
是的,你应该把所有的请求放入一个单一的实体,即Web API Utils。 他们应该发送回应,以便任何商店可以select采取行动。
前一段时间,我写了一篇博客文章,展示了如何处理请求的一种方法。http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/
如果我想让我的商店进行AJAX调用,我必须先调用Action Creator,对吗? 直接从Store中调用Web API Utils中的函数从根本上说是不正确的?
这是一个很好的问题,就我所见,每个人都有一点不同。 Flux(来自Facebook)没有提供完整的答案。
通常可以采取两种方法:
-
你可以说Store不应该“询问”任何数据,而是简单地摘要操作并通知视图。 这意味着如果商店为空,则必须在组件中触发“获取”操作。 这意味着如果必须获取数据,则必须检查每个数据侦听视图。 这可能会导致代码重复,如果多个视图听相同的存储。
-
商店是“聪明”的,因为如果他们被要求提供数据,他们会检查他们是否有实际的交付状态。 如果他们不这样做,他们告诉API Utils获取数据并返回一个挂起状态到视图。
请注意,这个“告诉API来获取数据”不是一个基于callback的操作,而是一个“随心所欲”的操作。 一旦请求返回,API将分派操作。
我更喜欢选项2,选项1,我听说来自Facebook团队的比尔·费舍尔说他们也是这样做的。 (请参阅上面的博文中的评论)
所以不 ,在我看来,从商店直接调用Api并不是没有根本的错误。
有没有像从商店连接到动作创作者的虚拟单向箭头?
根据你的Flux实现,可能会有很好的结果。
调度员和商店之间的callback是什么?
他们是唯一可以改变商店状态的function! 每个商店用分派器注册一个回叫。 所有的callback被调用,每当一个动作被调度。 每个callback决定是否必须改变给定的操作types的商店。 一些Flux库试图隐藏你的实现细节。
这里的Web API是什么? 这是你在哪里应用RESTful API? 有没有这个地方的例子?
我想在图片中,Web API矩形表示实际的服务器,API Utils是调用服务器(即$ .ajax或superagent)的API。 这很可能是一个提供JSON的RESTful API。
一般build议:
Flux是一个相当宽松的概念,从一个团队到另一个团队,确切的实施方式都会改变 我注意到Facebook随着时间的推移也改变了一些方法。 确切的周期不是严格定义的。 有一些相当“固定”的东西:
- 有一个调度程序将所有操作分派给所有商店,并且只允许一个操作来防止事件链地狱。
- 商店是动作接受者,所有的状态必须通过行动来改变。
- 行动是“火和忘记”(没有callback!)
- 视图从商店和消防行动接收状态
其他的事情从执行到执行都是不同的
- 我的Web API Utils中是否有所有$ .ajax调用是正确的/强烈build议? callback调用动作创build者,传递过程中的数据。
绝对。
- 如果我想让我的商店进行AJAX调用,我必须先调用Action Creator,对吗? 直接从Store中调用Web API Utils中的函数从根本上说是不正确的?
首先,问问自己为什么你的商店需要做一个API调用。 我能想到的唯一原因是你想caching收到的数据在商店(我这样做)。
在最简单的Flux实现中,所有的Actions只从View和Server创build。 例如,用户访问“Profile”视图,视图调用profileRequest
动作创build器,调用profileRequest
,进入一些数据,创buildServerAction
, ProfileStore
自行更新, ProfileView
做相应的操作。
使用caching: ProfileView
向configuration文件请求一些configuration文件,商店没有它,所以返回一个空状态的“加载”对象,并调用ApiUtils
来获取该configuration文件(并忘记它)。 当调用完成后,将创build一个ServerAction
, ProfileStore
将自行更新,等等。这工作正常。 你也可以从店里打电话给ActionCreator,但是我没有看到好处。
MartyJS做了类似的事情。 一些通量实现与promise相同。
我认为重要的部分是:当数据回到系统中时,一个ServerActionCreator被调用新的数据。 然后stream回商店。
我相信商店应该只查询数据,所有的状态改变的行动(更新的东西)应该是用户发起(来自意见)。 来自Facebook的工程师在这里写道: https : //news.ycombinator.com/item?id=7719957
- 有没有像从商店连接到动作创作者的虚拟单向箭头?
如果你想要你的商店很聪明:是的。 如果你想要你的应用程序很简单:不,通过意见。
- 调度员和商店之间的callback是什么?
这些是你在商店find的派遣处理程序。 调度员启动一个动作,存储监听这个火灾事件,并对动作/有效载荷做一些事情。
- 这里的Web API是什么? 这是你在哪里应用RESTful API? 有没有这个地方的例子?
这是你的ajax调用去的地方。 通常这将意味着一些REST API,但也可能是WebSockets或其他。 我一直喜欢这个教程: http : //fancypixel.github.io/blog/2015/01/29/react-plus-flux-backed-by-rails-api-part-2/
免责声明:这些是我对Flux的解释。 Flux本身并不能真正解决读取数据的问题,这就是为什么他们在FB中使用了Relay和GraphQL