Question

我正在努力将带有动漫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，在超时发生时调用该函数。有什么办法解决这个问题？谢谢！

此外，我在componentWillUnmount中放了动画

Answer 1

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

handleDeleteNoti = notification => {
    anime({
        targets: this.notiRef,
        opacity: [1,0],
        duration: 500,
    });

    setTimeout(()=>{this.props.clearNotification(notification._id)}, 5000)
    // this.props.clearNotification(notification._id);
}

Answer 2

您可以通过在超时后调用clearNotification来实现。

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

我还建议不要在减速器中使用副作用，因为那是anti-pattern。

商店更新前反应Redux-超时

2 个答案: