Easy-peasy [redux] toggle state from actionOn with a delay

Question

I'm trying to figure out, how to make a self-resetting model with easy-peasy. Basically I want to call setInGridAnimation once and then have it reset in 400ms automatically so I don't have to worry about it any more. The reason is obviously that there's an animation that takes 400ms and the "in animation" state has to be toggled for 400ms. This is what I tried:

const store = createStore({
    gridAnimation: {
        inAnimation: false,
        setInGridAnimation: action((state) => {
            state.inAnimation = true;
        }),
        stopInGridAnimation: action((state) => {
            state.inAnimation = false;
        }),
        onGridAnimation: actionOn(
            (actions, storeActions) => storeActions.gridAnimation.setInGridAnimation,
            async (state, target) => {
                const sleep = (ms) => {
                    return new Promise(resolve => setTimeout(resolve, ms));
                };

                await sleep(400);

                state.gridAnimation.stopInGridAnimation();
            },
        ),
    },
}

This fails because TypeError: Cannot perform 'get' on a proxy that has been revoked and other similar versions of this that I tested failed similarly. Makes sense I guess, but how do I access the proxy while it hasn't been revoked and still have a delay?

I'm not very sure that my approach is correct from the architectural point of view either because I don't have a huge load of experience with Redux, so I'm asking for both architectural help and help with this specific issue.

Answer 1

Ended up going with thunk which is the only thing I have to call from here. Seems to work fine.

gridAnimation: {
    inAnimation: false,
    startAnimation: action((state) => {
        state.inAnimation = true;
    }),
    stopAnimation: action((state) => {
        state.inAnimation = false;
    }),
    setInGridAnimation: thunk(async (actions) => {
        const sleep = (ms) => {
            return new Promise(resolve => setTimeout(resolve, ms));
        };

        actions.startAnimation();

        await sleep(400);

        actions.stopAnimation();
    }),
}