Flux / Flummox: Component stops listening the Store after first router transition

213 views Asked by At

I've just started using flummox and I'm a little bit flummoxed :)

Here is my use case.

App Layout

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

In my App I have Alert Component. When something happens I trigger an AlertAction from some component, it dispatches alert payload to AlertStore, which gets updated, and AlertComponent shows alert ( + hides it after some time).

For example I have a PostEdit Component. After form submit, I send request to API from PostActions and receive response, which is dispatched to PostStore. Store gets updated and PostEdit Component gets notified. In PostEdit's componentWillReceiveProps I check props, received from the store, and trigger AlertAction to show the alert.

2 problems:

  1. I have to use setTimeout to trigger AlertAction from the Post Component to make alert things happen (code below).
  2. And the main problem is that Alert Component stops listening AlertStore after the first react-router transition.

Here is console.log, illustrating the problem:

console.log

One more strange thing is that changed-store-notification in console.log printed before dispatch-payload-from-action-notification (which causes this store change).

Here are code snippets:

AlertHandler.jsx

export default class AlertHandler extends React.Component {

  // constructor()

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

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

Not sure are these bugs or I missed smth in flux/flummox patterns and do things wrong. Thanks for feedback!

0

There are 0 answers