Articles of flux

不能用alt动作触发alt存储(Flux)

我正在用goatslacker / alt开发stream量前端程序。 我有问题触发商店更新与行动。 听众不像我预料的那样运作。 我正在处理的代码现在非常复杂。 我会尽量简化我的问题到下面的代码。 我期待它最后login“Hello World!msg:Some message”。 显然,listener hello()甚至没有运行。 这是要运行的主要JavaScript(ES6)文件: import alt from './alt'; class DummyActionsProto { sayHello(msg) { console.log("sayHello", msg); return {msg} } } var DummyActions = alt.createActions(DummyActionsProto); class DummyStoreProto { constructor() { this.bindListeners({ hello: DummyActions.sayHello, }); this.state = { items: [], }; } hello(msg) { console.log("Hello World! msg: "+msg); } […]

为什么Dispatcher在Flux上启动不必要的事件?

我有一个React / Flux应用程序,其中包含以下组件: header.js subnav-area.js 饲料area.js 我也有相应的商店: navbar-store.js(header) subnav-store.js 饲料store.js …和行动: navbar-actions.js(header) subnav-actions.js 饲料actions.js 当按下subnav上的一个button时,feed和subnav都应该被更新,设置正确的进给types并突出显示激活的subnav元素。 我成功地实现了这个目标,但是我也多次启动一个onChange事件,同样也使用header.js组件,尽pipe它不应该受到这个动作的影响。 在行动中,我打电话给这样的调度员: AppDispathcer.handleViewAction({ actionType: AppConstants.SUBNAV_SET_ACTIVE, _id: subnavItemId }) 当然,这取决于目的。 我的调度员看起来像这样: handleViewAction:function(action){ this.dispatch({source:'VIEW_ACTION',action:action})} 在店里我有这样的事情来处理调度员: dispatcherIndex: AppDispatcher.register(function(payload) { var action = payload.action; switch(action.actionType) { case AppConstants.FILTER_SET_CAT: FeedStore.selectVisibleFeedItems(); break; case AppConstants.FEED_SHOW_MORE: FeedStore.showMoreItems(filterCatName); break; } FeedStore.emitChange(); return true; }) 所有组件都具有以下function(但具有不同的侦听器名称): componentWillMount:function(){ FeedStore.addFeedListener(this._onChange, 'feed-area.js'); }, […]

如何使用.net MVC的Flux和事件发射器?

我正在学习Flux模式。 我学会了使用.net MVC的React并将其呈现在服务器端。 我想学习Flux,但所有教程都使用节点js。 我不使用节点。 我不知道如何实现Event Emitter部分,因为它使用了一个节点函数。 https://www.codementor.io/reactjs/tutorial/react-js-flux-architecture-tutorial 大约三分之一的下降: “事件发射器 – 事件发射器负责在存储完成任何数据动作之后通知订阅者,反之,它也需要能够注册观察者以用于特定的事件,我们将在待办事项应用程序中使用Node的事件发射器“。 考虑到Flux只是一个模式,是否有什么我可以使用.NET MVC,在没有节点,处理事件发射器的一部分? 感谢赞赏,谢谢。

React Flux调度器vs Node.js EventEmitter – 可扩展?

当你使用Node的EventEmitter时,你订阅一个事件。 您的callback仅在特定事件启动时执行: eventBus.on('some-event', function(data){ // data is specific to 'some-event' }); 在Flux中,您向调度员注册您的商店,然后当每个事件被调度时,您的商店被调用。 商店的任务是过滤每一个事件,并确定事件对商店是否重要: eventBus.register(function(data){ switch(data.type){ case 'some-event': // now data is specific to 'some-event' break; } }); 主持人在录像中说: 实际上,所有商店都会收到所有的动作,这就是保持可扩展性的原因。“ 题 为什么以及如何向每个商店发送每个动作(大概)比只向特定商店发送动作更具可扩展性?

同构JS – 只有httpRequest客户端

关于同构stream量应用中商店数据总量的问题。 (我正在使用的反应,ALT,ISO和节点,但理论适用于其他的例子) 我有一个stream量'商店'( http://alt.js.org/docs/stores/ ),需要从api获取数据: getState() { return { data : makeHttpRequest(url) } } 当用户在SPA中导航时,更多的数据将通过http请求加载。 我希望这个应用程序是同构的,以便我可以呈现应用程序完整的HTML包括最新的数据服务器端,并返回给用户的快速初始页面加载。 react.renderToString()允许我将应用程序呈现为html,并且可以使用alt&iso来播种数据: storeData = { "MyStore" : {"key" : "value"}}; // set data for store alt.bootstrap(JSON.stringify(storeData || {})); // seed store with data var content = React.renderToString(React.createElement(myApp)); // render react app to html 问题是,当运行js服务器端时,我会看到错误,因为商店将要发出一个http请求,这是不可能的(因为xmlhttprequest不会存在于节点中) 什么是解决这个问题的最好方法? 我能想到的唯一解决scheme是将商店中的httprequest包装在: var ExecutionEnvironment = require('react/lib/ExecutionEnvironment'); […]

Flux / Alt数据依赖,如何优雅和惯用地处理

我使用alt作为项目的stream量实现,并且在处理两个相关实体的加载存储的最佳方法时遇到了麻烦。 我使用源特性与registerAsync一起处理我的asynchronous/ api调用,并使用AltContainer将它们绑定到我的视图。 我有两个由conversationId相互关联的实体。 两者都通过api调用加载: 一旦我的工作商店加载数据,我想填补一个对话商店。 我使用源来加载作业存储: module.exports = { fetchJobs() { return { remote() { return axios.get('api/platform/jobs'); },…. 看起来像waitFor()方法的工作,但它似乎用于一个商店的内容需要转换或合并与另一个的内容。 我需要根据另一个数据的内容获取一个数据存储的内容。 一般而言,我需要: 调用第三方API并将实体列表加载到商店中。 当数据到达时,我需要使用上述每个属性来调用另一个API并将该数据加载到另一个存储中。 我天真的解决scheme是参考作业存储中的对话操作,并在数据到达时分派事件。 像这样的东西: var jobActions = require('../actions/Jobs'); var conversationActions = require('../actions/Conversations'); class JobStore { constructor() { this.bindListeners({ handlefullUpdate: actions.success });… } handlefullUpdate(jobs) { this.jobs = jobs; conversationActions.fetch.defer(jobs); } } 当然,这样做违反了商店不应该派遣事件的格言,因此我必须使用推迟在派遣中间派遣一个行动。 这对我来说是有意义的,因为它似乎在走下去,我在我的代码中重新引入各种副作用; 失去了我应该看到的“function性pipe道”的美感。 […]