如果商店保持自己的状态并且能够在这样做时调用网络和数据存储服务......在这种情况下,操作只是愚蠢的消息传递者,
-要么-
...存储是否应该是来自操作的不可变数据的愚蠢接收者(并且操作是在外部源之间获取/发送数据的操作?此实例中的存储将充当视图模型并且能够聚合/过滤它们在根据动作提供的不可变数据设置自己的状态之前的数据.
在我看来,它应该是一个或另一个(而不是两者的混合).如果是这样,为什么一个首选/推荐优于另一个?
在Redux中,对商店的每次更改都会触发notify所有连接的组件.这使开发人员的工作变得非常简单,但是如果你有一个具有N个连接组件的应用程序,并且N非常大,该怎么办?
即使与组件无关,对商店的每次更改仍然通过对商店的ed路径进行shouldComponentUpdate简单===测试来运行reselect.那很快,对吗?当然,也许一次.但N次,每次变化?设计的这一根本性变化让我质疑Redux的真正可扩展性.
作为进一步优化,可以notify使用批量处理所有呼叫_.debounce.即便如此,===对每个商店进行N次测试更改并处理其他逻辑(例如视图逻辑)似乎是达到目的的手段.
我正在与数百万用户合作开发健康和健身社交移动网络混合应用程序,并且正在从Backbone过渡到Redux.在此应用程序中,向用户呈现可滑动的界面,允许他们在不同的视图堆栈之间导航,类似于Snapchat,除了每个堆栈具有无限深度.在最流行的视图类型中,无限滚动器有效地处理诸如帖子之类的馈送项的加载,渲染,附加和分离.对于参与的用户,滚动数百或数千个帖子,然后输入用户的订阅源,然后输入另一个用户的订阅源等,这种情况并不罕见.即使进行了大量优化,连接组件的数量也会变得非常大.
另一方面,Backbone的设计允许每个视图精确地聆听影响它的模型,将N减少到常数.
我错过了什么,或者Redux对于大型应用程序存在根本缺陷?
我将成为David Nolen的Om库的粉丝.
我想在我们的团队中构建一个不太大的Web应用程序,但我无法说服我的队友切换到ClojureScript.
有没有办法可以使用om中使用的原则但是在JavaScript中构建应用程序?
我想的是:
我正在努力争取上面的第5名.
有没有人冒险进入这个领域或有任何建议?也许有人尝试使用immutable-js构建react.js应用程序?
与Backbone + React相比,Flux + React有什么优势.除了代码开发容易之外,是否存在任何性能差异,以实现庞大复杂的代码库.
如果我们在使用Backbone + React的应用程序中的模型和反应视图之间存在1:1关系,该怎么办?
我应该如何在相当传统的Web应用程序中处理ajax请求?特别是使用React进行视图,同时使用后端处理文本等数据,但是使用ajax自动保存用户交互,例如切换选项或将帖子贴到服务器上.
我应该只使用jQuery,还是像Backbone这样的东西会更有益?
我的代码 https://gist.github.com/ButuzGOL/707d1605f63eef55e4af
因此,当我获得登录成功回调时,我想进行重定向,
重定向也通过调度程序工作.
而且我得到的是Dispatch.dispatch(...):无法在发送过程中发送.
在中间是否有任何黑客行动?
我正在使用Facebook的Flux Dispatcher创建一个简单的CRUD应用程序来处理英语学习网站的帖子的创建和编辑.我目前正在处理一个看起来像这样的api:
/posts/:post_id
/posts/:post_id/sentences
/sentences/:sentence_id/words
/sentences/:sentence_id/grammars
Run Code Online (Sandbox Code Playgroud)
在应用程序的显示和编辑页面上,我希望能够在一个页面上显示给定帖子的所有信息以及所有句子和句子的单词和语法详细信息.
我遇到的问题是弄清楚如何启动收集所有这些数据所需的所有异步调用,然后将我需要的数据从所有存储组合成一个对象,我可以将其设置为我的顶级组件中的状态.我一直在尝试做的一个当前(可怕)的例子是:
顶级PostsShowView:
class PostsShow extends React.Component {
componentWillMount() {
// this id is populated by react-router when the app hits the /posts/:id route
PostsActions.get({id: this.props.params.id});
PostsStore.addChangeListener(this._handlePostsStoreChange);
SentencesStore.addChangeListener(this._handleSentencesStoreChange);
GrammarsStore.addChangeListener(this._handleGrammarsStoreChange);
WordsStore.addChangeListener(this._handleWordsStoreChange);
}
componentWillUnmount() {
PostsStore.removeChangeListener(this._handlePostsStoreChange);
SentencesStore.removeChangeListener(this._handleSentencesStoreChange);
GrammarsStore.removeChangeListener(this._handleGrammarsStoreChange);
WordsStore.removeChangeListener(this._handleWordsStoreChange);
}
_handlePostsStoreChange() {
let posts = PostsStore.getState().posts;
let post = posts[this.props.params.id];
this.setState({post: post});
SentencesActions.fetch({postId: post.id});
}
_handleSentencesStoreChange() {
let sentences = SentencesStore.getState().sentences;
this.setState(function(state, sentences) {
state.post.sentences = sentences;
});
sentences.forEach((sentence) => {
GrammarsActions.fetch({sentenceId: sentence.id})
WordsActions.fetch({sentenceId: sentence.id})
}) …Run Code Online (Sandbox Code Playgroud) 存储应该处理由操作触发的事件并将更改发送到侦听视图控制器.
他们也可以触发操作,例如在请求的回调中或直接在商店的注册回调中.
例如:
AppDispatcher.register(function(payload) {
switch(payload.action.actionType) {
case Constants.PAGE_CHANGED:
ActionCreator.fetchNewData();
break;
case Constants.FETCH_DATA:
// save data
Store.emitChange();
break;
}
});
Run Code Online (Sandbox Code Playgroud)
Flux架构中的代码是否"正确"?
谢谢 !
======基于评论的更新:
这不是"我需要这样做.我该怎么做?"的问题,而是"这应该是一种做事方式".我猜答案是......你的选择.
感谢您在评论中添加了一些有用的链接.
我对事情的理解如下:
在Flux架构中,视图应该是唯一触发操作的视图.将异步请求放入您的操作创建者中,并且回调应该启动新操作.
如果不遵循Flux步骤,商店也可以处理异步请求,但要确保回调不直接处理数据,而是触发另一个操作.请参阅Bill Fisher对此的回答.
无论如何,正如Ben Alpert的回答所说,您可以为用户操作创建多个操作(例如:REQUEST_START,REQUEST_SUCCESS,REQUEST_ERROR),这样您就可以挂钩到请求的不同阶段.
欢迎任何有关此事的更新.
我正在使用MartyJS构建一个Flux应用程序(它非常接近"vanilla"Flux并使用相同的底层调度程序).它包含具有固有依赖关系的商店.例如,a UserStore跟踪当前用户,以及InstanceStore跟踪当前用户拥有的数据实例.实例数据是异步从API获取的.
问题是如何处理InstanceStore用户更改时的状态.
我开始相信(例如,阅读@fisherwebdev在SO上的答案),最适合在动作创建者函数中发出AJAX请求,并在动作中产生AJAX"成功"结果,从而导致商店发生变化.
因此,为了获取用户(即登录),我正在动作创建者函数中进行AJAX调用,当它结算时,我RECEIVE_USER将作为有效负载向用户发送动作.在UserStore这个监听并相应地更新其状态.
但是,InstanceStore如果用户更改,我还需要重新获取所有数据.
选项1:我可以RECEIVE_USER在其中监听InstanceStore,如果是新用户,则触发AJAX请求,该请求又创建另一个动作,从而导致InstanceStore更新.这个问题就是它感觉像是级联动作,虽然技术上它是异步的,所以调度员可能会允许它.
选项2:另一种方式是InstanceStore听取发出的变化事件UserStore并进行请求 - 动作舞蹈,但这也是错误的.
选项3:第三种方式是动作创建者编排两个AJAX调用并分别发送这两个动作.但是,现在动作创建者必须知道很多关于商店如何相互关联的信息.
在Flux应用程序中应该在哪里进行ajax请求?让我觉得选项1是正确的,但Flux文档也暗示商店触发行动并不好.
我已经找到了很多有关如何获取React和Flux数据的资源,博客和意见,但更不用说将数据写入服务器了.有人可以在构建一个持续更改RESTful Web API的简单编辑表单的上下文中提供"首选"方法的基本原理和一些示例代码吗?
具体来说,哪个Flux盒子应该调用$.post,ActionCreator.receiveItem()调用的位置(以及它做什么),以及商店注册方法中的内容是什么?
相关链接:
reactjs ×8
reactjs-flux ×6
backbone.js ×3
flux ×3
ajax ×2
javascript ×2
jquery ×1
mobile ×1
om ×1
performance ×1
redux ×1