javascript - Easy-peasy [redux] 从 actionOn 切换状态有延迟

Question

我想弄清楚，如何用easy-peasy制作一个自复位模型。基本上我想调用setInGridAnimation一次，然后在 400 毫秒内自动重置，这样我就不用再担心了。原因很明显，有一个动画需要 400 毫秒，而“动画中”状态必须切换 400 毫秒。这是我尝试过的：

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();
            },
        ),
    },
}

这失败了，因为TypeError: Cannot perform 'get' on a proxy that has been revoked我测试的其他类似版本同样失败了。我猜是有道理的，但是如何在代理尚未被撤销且仍有延迟的情况下访问它？

从架构的角度来看，我不太确定我的方法是否正确，因为我没有大量使用 Redux 的经验，所以我寻求架构帮助和解决这个特定问题的帮助。

Answer 1

结束了，thunk这是我唯一必须从这里打电话的事情。似乎工作正常。

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();
    }),
}