How to dispatch a Redux action with a timeout?

后端 未结 12 1939
花落未央
花落未央 2020-11-22 04:14

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

12条回答
  •  不要未来只要你来
    2020-11-22 05:04

    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.

提交回复
热议问题