标签: flux

我正在尝试在Flux-React中设置最基本的应用程序.它的唯一目标是触发一个Action,它通过Dispatcher发送到已经向Dispatcher注册的Store.将商店记录payload到控制台.

除了Store之外的所有东西都运行良好,但是一旦它命中AppDispatcher.register,Flux就会抛出以下错误:

Uncaught TypeError: Cannot set property 'ID_1' of undefined

这是导致错误的文件的代码,但我已经把整个项目放在https://github.com/bengrunfeld/react-flux-dispatcher-error,你可以在src/js中找到有问题的文件/stores/AppStores.js

var AppDispatcher = require('../dispatcher/AppDispatcher');
var EventEmitter = require('events').EventEmitter;
var AppConstants = require('../constants/AppConstants');
var assign = require('object-assign');


var CHANGE_EVENT = 'change';

var AppStore = assign({}, EventEmitter.prototype, {
  emitChange: function() {
    this.emit(CHANGE_EVENT);
  }
});

AppDispatcher.register(function(payload){
  console.log(payload);
  return true;
})

module.exports = AppStore;

我在这里看到这一行作为另一个问题的答案:

"componentWillMount应该是componentDidMount,否则你将在节点中泄漏事件发射器."

我真的不明白.有人可以更详细地解释一下吗？

更多信息:

使用flux构建react应用程序,作为初始渲染的一部分,子组件计算一些数据.理想情况下,在计算此数据之后,我想调用一个动作,用一部分新数据更新商店的状态.

通常,更新商店的状态会发出导致重新呈现的更改事件.但是,因为更改侦听器直到componentDidMount(而不是componentWillMount)才被添加,所以我的顶级组件无法侦听初始渲染期间发生的更改并启动重新渲染.

如果我将addChangeListener移动到似乎可以修复此问题的componentWillMount,但上面的引用表明这是一个坏主意？

我似乎遇到了一种情况,我无法避免在Flux中发送调度问题.

我已经阅读了一些关于这个问题的类似问题,但是除了setTimeout黑客之外,它们似乎都没有一个好的解决方案,我想避免.

我实际上使用alt.js而不是Flux,但我认为概念是相同的.

脚本

想象一下最初呈现登录表单的组件.当用户登录时,这会触发最终以身份验证信息(例如用户名)响应的XHR,然后根据身份验证信息获取一些安全数据并呈现它而不是登录表单.

我遇到的问题是当我尝试根据XHR响应触发一个动作来获取数据时,它仍然在发送LOGIN_RESPONSE动作,并触发了可怕的行为

Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.

例

我创建了这个jsfiddle来演示这个问题.

我有一个Wrapper组件Contents,根据用户是否设置,呈现登录按钮或子组件MyStore.

1. 首先,登录按钮在Wrapper组件中呈现.
2. 单击该按钮将调度该LOGIN操作.
3. 延迟之后,将LOGIN_RESPONSE调度该操作(通过alt.js中的异步机制).
4. 此操作会触发MyStore更新用户名.
5. Wrapper 组件观察存储更改并更新其状态.
6. 这会导致Wrapper呈现Content组件而不是登录按钮.
7. Contentmount上的组件尝试分派FETCH_DATA操作,但由于调度程序仍在调度,因此操作失败LOGIN_RESPONSE.(如果我将FETCH_DATA调度包装在setTimeout它的工作中,但感觉就像一个黑客).

这种情况的变化似乎是一种常见的情况.事实上,几乎所有相关问题都有类似的情况,但没有好的或具体的答案.

• React - 身份验证过程:无法在调度中间调度
• 在Flux/React中调度级联/依赖异步请求
• Flux Dispatch.dispatch(...):无法在调度中间发送

这个数据流有什么本质上的错误吗？做这样的事情的适当的Flux方式是什么？

我使用Flux,React和我有组件简单和消息:

• 简单:它是一个由Action调用API的简单组件.Action执行ajax请求并将结果分派jqXHR.done().简单有一个更改侦听器等待调度结果.如果结果为null,我想使用我的Messages组件显示错误,所以我打电话给我MessagesAction.addError('My result is null').
• 消息:显示应用程序错误的组件.此组件具有更改侦听器,等待显示新消息.它放在我的应用程序的标题中.

当我收到null结果并立即调用MessagesAction.addErrorSimple组件内部时,会出现问题.事实上,我知道这可能会导致"在调度中间发送 "错误,但我不知道如何重构此代码以显示使用Flux的错误消息.

免责声明1:我无法使用setTimeout函数来解决此问题.这不是正确的解决方案.

免责声明2:该Simple组件代表app中的任何其他组件,它也将使用Messages组件显示消息.

简单代码:

findUser: function (value) {
  UserAction.find(value);
},

componentDidMount: function () {
  UserStore.addChangeListener(this.updateUser);
},

updateUser: function(){
  var user = UserStore.getUser();
  if (user == null){
     MessagesAction.addError('My result is null!'); //here occur the error!
  } else {
     //set my user with setState
  }
},

消息代码:

componentDidMount: function () {
    MessagesStore.addChangeListener(this.addMessage);
},

addMessage: function () {
    this.setState({
        messages: MensagensStore.getMessages() …

我是Flux/React的新手,我很难理解一些基本的架构决策:

1. 我知道所有商店都是单身人士,但它们都是在应用程序启动时创建的,还是商店的生命周期可以更小,特定于用户的行为？
2. 我可以拥有相同商店类型的多个实例,每个实例都使用不同的上下文进行初始化吗？

不幸的是,我看到的所有例子似乎都太简单了,无法回答这些问题.让我们从Facebook的聊天应用示例开始吧.有多个线程,每个线程都有消息.MessageStore保存整个应用程序的所有消息,名为getAllForThread(id)的方法返回已过滤的消息子集.当消息进入任何线程时,它会发出更改通知,导致MessageSection react组件重新获取数据(无论用户正在查看哪个线程).这显然不会扩展.如果我们有10,000个线程,每个都有大量的消息活动怎么办？以下是我决定解决问题的方法:

1. 每个MessageStore都使用线程ID进行初始化.
2. 创建一个单独的MessageStoreFactory,用于创建和管理MessageStores.
3. 当用户单击一个线程而不是订阅全局MessageStore的React组件时,它会向MessageStoreFactory询问该特定线程的MessageStore .
4. 如果工厂已经有该线程的MessageStore,则返回它.否则它会创建一个,启动异步任务以获取它的初始数据,然后返回它.
5. 当React组件被拆除时(假设用户导航离开它),它会通知Factory它已完成Store的全部操作.使用引用计数或其他一些缓存逻辑将允许Factory修剪未使用的存储.

我用这种方法离基地有多远？还有一种更简单的方法可以扩展吗？

我知道我需要一个emit.change()调度员,让所有组件都知道商店内部发生了变化.但我不明白为什么我需要调度操作而不是直接从操作中调用存储,

我为什么要这样做:

var Dispatcher = require('dispatcher');
var MyActions = {
    addItem: function(item){
        Dispatcher.dispatch({
              action: 'ADD_ITEM',
              payload: item       
       })
    }
}

而不是这个:

var MyStore = require('mystore');
var MyActions = {
    addItem: function(item){
        MyStore.addItem(item);
    }
}

是的情况下,多个卖场听同样的事件,例如,当StoreA和StoreB听ADD_ITEM呢？

致电UML专家寻求有关布置javascript特定图表的帮助。

注意：反应，Flux体系结构，反应所需的redux经验。

我需要有关如何表示React应用程序（容器和子组件）的结构和行为的设计决策方面的帮助。使用Sparx企业架构师的目标是具有标准的UML设计，以便整个团队（许多人对该技术不太熟悉）可以了解最新情况，以及UI开发人员可以将其用于开发。

在确定了我们需要的UML类（React Components），Containers，presentation Views以及我们仍在努力的行为之后：

1. 似乎我们需要为每个主容器使用两个图来完整地表示它，一个用于结构，另一个用于行为？如果设计遵循约定，是否需要一个行为图？

2. 结构图中的表示组件是否应该显示触发的事件或通过传递回props的回调调度的动作？（例如，将Button事件的操作注释给onClick或onClick将调用的调度动作），或两者兼而有之。

3. 我们可以说反应动作是信号吗？由于它们是普通的js对象，并且状态变化发生在化简器中，所以也许我们需要一个Statechart图？

4. 根据上述决定，我们如何在图中引用Store实例（我们有一个商店），我们应该在所有图中引用Store实例还是仅向其类图添加链接？

5. 将Reducers --Set State->存储为<信息流>和将-mapStateToProps->道具表示为<依赖项>是否正确？

6. 我们能否将proppropTypes组件称为类约束或创建接口？

除了一些序列图可以部分可视化Nodejs模块之外，我找不到用UML设计的javascript应用程序的良好参考。如果有，请发送给我。

谢谢

嗨,我现在正在研究Angular 2和React + Redux,我对这两个选择的数据流差异的区别有疑问.

1. Angular 2默认使用单向数据流.Redux是一个Flux实现,它(也)使用单向数据流.这些之间的关键区别是什么？(可能是部件的组成？)
2. 如果这两者在数据流方面没有太大差异,为什么有人会使用Flux或Redux而不是默认选择Angular 2框架？
3. 如果这两者完全不同,是否有一个名称我可以调用Angular 2的数据流以进一步参考来比较这两者？

非常感谢提前!

我目前正在研究 Spring WebFlux。我正在尝试使用 Spring WebFlux 上传大文件（70mo）。

我的控制器

@RequestMapping(method = RequestMethod.POST, consumes = MediaType.MULTIPART_FORM_DATA_VALUE, produces = MediaType.APPLICATION_JSON_VALUE)
public Flux<String> uploadHandler(@RequestBody Flux<Part> fluxParts, @RequestParam(value = "categoryType") String categoryType, @PathVariable(value = "traceabilityReportUuid") String traceabilityUuid) {
    return documentHandler.upload(fluxParts, UUID.fromString(traceabilityUuid), categoryType);
}

我的服务

public Flux<String> upload(Flux<Part> fluxParts, UUID traceabilityUuid, String categoryType) {

    return fluxParts
            .filter(part -> part instanceof FilePart)
            .ofType(FilePart.class)
            .flatMap(p -> this.upload(p, traceabilityUuid, categoryType));


}


private Mono<String> upload(FilePart filePart, UUID traceabilityUuid, String categoryType) {

    return filePart.content().collect(InputStreamCollector::new, (t, dataBuffer) -> t.collectInputStream(dataBuffer.asInputStream()))
            .flatMap(inputStreamCollector -> {
                upload(traceabilityUuid, …

我有一个通量，应该几乎立即发出一个项目。此后，它可能会在很长一段时间内不再发射物品。如果最初没有收到任何项目，我希望它超时。但如果我使用该timeout(Duration)方法，每次在给定时间内没有收到任何项目时，它都会超时。

我现在的代码由于上述原因而不起作用：

messageFlux.timeout(Duration.ofSeconds(30)).doOnError(e -> {
    // handle error
}).subscribe(m -> messageService.consumeMessage(m));

有没有一种方法可以有效地做到这一点？