Reactjs Flux/Flummox：组件在第一次路由器转换后停止侦听存储

我刚开始使用

flummox

，我有点不知所措：）

这是我的用例

应用程序布局

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

Alert.jsx

export default class AlertHandler extends React.Component {

  // constructor()

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

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()
}

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()
}

PostEdit.jsx

export default class AlertHandler extends React.Component {

  // constructor()

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

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()
}

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()
}

不确定这些bug是否存在，或者我错过了flux/flummox模式中的smth，并且做错了事情。感谢您的反馈