React Redux- Store 更新前超时

Question

I'm working on getting animations with anime js into my react redux app. I have a notifications objects in the store, and when the user clicks delete a notification is deleted, and the store updates. However, I need to wait a couple hundred milliseconds to let the fade-out animation to play. I tried setting a time out before calling the action, with no luck.

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

I also tried setting a timeout in the reducer with no success either.

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

I guess my question really boils down to a reverse setTimeout, where the function is called while the timeout is happening. Is there any way to solve this? Thanks!

Also, I have my animation in componentWillUnmount

Answer 1

The answer was actually pretty simple, I just called the animation and set a timeout until the action was called:

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

You can probably achieve that by calling clearNotification after the timeout.

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

Also I recommend not using side effects in the reducer because that is an anti-pattern .