1

我刚刚开始使用flummox，我有点困惑:)

这是我的用例。

应用布局

<section id="layout">
  <Header {...this.props} />
  <RouteHandler {...this.props} />
  <Footer />
  <Alert {...this.props} />
</section>

在我的应用程序中，我有Alert Component. 当发生某些事情时，我AlertAction从某个组件触发一个，它会将警报有效负载分派到AlertStore，它会被更新，并AlertComponent显示警报（ + 在一段时间后隐藏它）。

例如我有一个PostEdit Component. 表单提交后，我向 API 发送请求PostActions并接收响应，该响应被分派到PostStore. 商店得到更新并PostEdit Component得到通知。在PostEdit'scomponentWillReceiveProps我检查道具，从商店收到，并触发AlertAction显示警报。

2个问题：

  1. 我必须使用setTimeout触发AlertAction来Post Component使警报发生（下面的代码）。
  2. 主要问题是在第一次转换后Alert Component停止收听。AlertStorereact-router

这是console.log，说明了问题：

控制台日志

更奇怪的是，console.log 中的 changed-store-notification 在 dispatch-payload-from-action-notification 之前打印（这会导致此存储更改）。

以下是代码片段：

警报处理程序.jsx

export default class AlertHandler extends React.Component {

  // constructor()

  render() {
    return (
        <FluxComponent connectToStores={'alerts'}>
          <Alert {...this.props} />
        </FluxComponent>
    );
  }
}

警报.jsx

export default class Alert extends React.Component {

  // constructor()
  // _handleShow()
  // _handleHide()

  componentDidMount() {
    this.props.flux.getStore('alerts').addListener('change', function() {
      console.log('Changed!', this.state);
    });
  }

  componentWillUnmount() {
    console.log('Not gonna happen');
  }

  // render()
}

PostEdit.jsx

export default class PostEdit extends React.Component {

  // constructor()

  componentWillReceiveProps(newProps) {
    this.setState({
      isLoading: false
    }, () => {
      if (newProps.errors) {
        // without `setTimeout` nothing happens
        setTimeout(() => {
          newProps.flux
              .getActions('alerts')
              .showErrorAlert(newProps.errors);
        }, 1);
      } else {
        setTimeout(() => {
          newProps.flux
              .getActions('alerts')
              .showSuccessAlert();
        }, 1);
      }
    });
  }

  _submitPost(e) {

    // doing stuff...

    // triggering updatePost action
    this.props.flux
        .getActions('posts')
        .updatePost(post);
  }

  // render()
}

不确定是这些错误还是我错过了通量/flummox 模式中的某些东西并且做错了事情。感谢您的反馈！

4

0 回答 0