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:
- I have to use
setTimeout
to triggerAlertAction
from thePost Component
to make alert things happen (code below). - And the main problem is that
Alert Component
stops listeningAlertStore
after the firstreact-router
transition.
Here is console.log, illustrating the problem:
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!