I have an action that updates the notification state of my application. Usually, this notification will be an error or info of some sort. I need to then dispatch another act
Why should it be so hard? It's just UI logic. Use a dedicated action to set notification data:
dispatch({ notificationData: { message: 'message', expire: +new Date() + 5*1000 } })
and a dedicated component to display it:
const Notifications = ({ notificationData }) => {
if(notificationData.expire > this.state.currentTime) {
return {notificationData.message}
} else return null;
}
In this case the questions should be "how do you clean up old state?", "how to notify a component that time has changed"
You can implement some TIMEOUT action which is dispatched on setTimeout from a component.
Maybe it's just fine to clean it whenever a new notification is shown.
Anyway, there should be some setTimeout
somewhere, right? Why not to do it in a component
setTimeout(() => this.setState({ currentTime: +new Date()}),
this.props.notificationData.expire-(+new Date()) )
The motivation is that the "notification fade out" functionality is really a UI concern. So it simplifies testing for your business logic.
It doesn't seem to make sense to test how it's implemented. It only makes sense to verify when the notification should time out. Thus less code to stub, faster tests, cleaner code.