在商店更新之前反应Redux-超时

我正在努力将带有动漫js的动画放入我的React Redux应用程序中。我在商店中有一个通知对象,当用户单击“删除”时,通知将被删除,商店也将更新。但是,我需要等待几百毫秒才能播放淡出动画。我尝试在致电之前设置超时时间,但是没有运气。

handleDeleteNoti = notification => {
    setTimeout(()=>{
        anime({
        targets: this.notiRef,
        opacity: [1,0],
        duration: 5000,
        })
    }, 5000);
    this.props.clearNotification(notification._id);
}

我也尝试在减速器中设置超时,也没有成功。

case CLEAR_NOTIFICATION:
    const newData = state.data.filter(notification=>notification._id!==action.payload);
    setTimeout(()=>{
        return {
            ...state, 
            data: newData
        }}, 400);

我想我的问题真的可以归结为一个反向setTimeout,在超时发生时调用该函数。有什么办法解决这个问题?谢谢!

Also, I have my animation in componentWillUnmount

评论
  • w无意
    w无意 回复

    答案实际上非常简单,我只是调用了动画,并设置了一个超时时间,直到调用该动作为止:

    handleDeleteNoti = notification => {
        anime({
            targets: this.notiRef,
            opacity: [1,0],
            duration: 500,
        });
    
        setTimeout(()=>{this.props.clearNotification(notification._id)}, 5000)
        // this.props.clearNotification(notification._id);
    }