Flux/Alt setTimeout 未更新商店

Question

我正在尝试使用 Alt 在我的 React 应用程序中创建类似 "Toast" 的基本服务。

我已经完成了大部分逻辑工作，我可以将新项目添加到触发 add(options) 操作时出现在我视图中的数组中，但是我也试图允许超时启动后发送并删除 toast 项目：

onAdd(options) {
    this.toasts.push(options);

    const key = this.toasts.length - 1;

    if (options.timeout) {
        options.timeout = window.setTimeout(() => {
            this.toasts.splice(key, 1);
        }, options.timeout);
    }
}

添加时，toast 出现在我的页面上，超时也被触发（比如几秒钟后），但是在这个 setTimeout 中操作 this.toasts 似乎没有任何效果。

显然这缺少核心功能，但除了 setTimeout 部分之外一切正常。

Answer 1

似乎超时是在内部设置状态，而不是广播更改事件。它可能就像调用 forceUpdate() 一样简单。但是我使用的模式是调用 setState()，我认为您在这种情况下可能需要这样做。

下面是更新状态和广播更改事件的示例。

import alt from '../alt'
import React from 'react/addons'
import ToastActions from '../actions/ToastActions'

class ToastStore {

 constructor() {
  this.toasts = [];
  this.bindAction(ToastActions.ADD, this.add);
  this.bindAction(ToastActions.REMOVE, this.remove);
 }

 add(options) {
  this.toasts.push(options);
  this.setState({toasts: this.toasts});
  if (options.timeout) {
   // queue the removal of this options
   ToastActions.remove.defer(options);
  }
 }

 remove(options) {
  const removeOptions = () => {
   const toasts = this.toasts.filter(t => t !== options);
   this.setState({toasts: toasts});
  };
  if (options.timeout) {
   setTimeout(removeOptions, options.timeout);
  } else {
   removeOptions();
  }
 }

}

module.exports = alt.createStore(ToastStore, 'ToastStore');

Flux/Alt setTimeout 未更新商店

Flux/Alt setTimeout not updating store

javascript

toast

reactjs

reactjs-flux