Redux Store更新值在处理函数内未同步的问题排查

问题重现 #

我有一个函数式组件通过Redux Toolkit从Store取值，Store中的变量会通过RTK Query请求API后更新，但组件内的处理函数始终只能拿到初始默认值：

SomeContainer 代码 #

const SomeContainer = () => {
    const dispatch = useDispatch();

    const variableFromStore = useSelector(someSelectors.variableFromStore);
    console.log(variableFromStore) // 能打印更新后的值

    const handleSomeAction = () => {
        console.log(variableFromStore) // 始终打印Store初始默认值
    };

    return <SomeComponent onSomeAction={handleSomeAction} />;
};

SomeComponent 代码 #

const SomeComponent = (props) => {
    const { list, onSomeAction } = props;

    const moreRef = useRef(null);

    const loadMore = () => {
        if (moreRef.current) {
            const scrollMorePosition = moreRef.current.getBoundingClientRect().bottom;
            if (scrollMorePosition <= window.innerHeight) {
                onSomeAction(); // 调用容器组件传过来的处理函数
            }
        }
    };

    useEffect(() => {
        window.addEventListener('scroll', loadMore);
        return () => {
            window.removeEventListener('scroll', loadMore);
        };
    }, []);

    return (
        // ...组件内容
    );
};

原因分析 #

这是典型的闭包陷阱，结合React组件渲染机制导致的：

1. SomeContainer第一次渲染时，创建了handleSomeAction函数，它捕获了当时的variableFromStore（也就是Store的初始默认值）。
2. 当RTK Query请求完成更新Store后，SomeContainer会重新渲染，生成新的handleSomeAction函数（此时它捕获的是更新后的变量值）。
3. 但SomeComponent中的useEffect依赖项是空数组[]，只会在组件挂载时执行一次，绑定的是第一次传入的onSomeAction（也就是旧的handleSomeAction），所以滚动触发loadMore时，调用的始终是旧的处理函数，自然拿不到最新值。

解决方案 #

方案1：给SomeComponent的useEffect添加依赖项 #

修改SomeComponent的useEffect，把onSomeAction加入依赖数组，这样当onSomeAction更新时，会移除旧的滚动监听，绑定新的监听，确保调用的是最新的处理函数：

const SomeComponent = (props) => {
    const { list, onSomeAction } = props;

    const moreRef = useRef(null);

    const loadMore = () => {
        if (moreRef.current) {
            const scrollMorePosition = moreRef.current.getBoundingClientRect().bottom;
            if (scrollMorePosition <= window.innerHeight) {
                onSomeAction();
            }
        }
    };

    useEffect(() => {
        window.addEventListener('scroll', loadMore);
        return () => {
            window.removeEventListener('scroll', loadMore);
        };
    }, [onSomeAction]); // 添加onSomeAction作为依赖

    return (
        // ...组件内容
    );
};

方案2：用useCallback缓存handleSomeAction #

在SomeContainer中用useCallback包裹handleSomeAction，只有当variableFromStore变化时才生成新的函数，避免不必要的SomeComponent重渲染：

import { useCallback } from 'react';

const SomeContainer = () => {
    const dispatch = useDispatch();

    const variableFromStore = useSelector(someSelectors.variableFromStore);
    console.log(variableFromStore)

    // 用useCallback缓存函数，依赖variableFromStore
    const handleSomeAction = useCallback(() => {
        console.log(variableFromStore);
    }, [variableFromStore]);

    return <SomeComponent onSomeAction={handleSomeAction} />;
};

同时配合方案1的SomeComponent依赖修改，这样只有变量变化时才会更新监听，性能更优。

方案3：在处理函数内实时获取最新值 #

如果不想处理依赖，可以在handleSomeAction内部直接从Store获取最新值，需要用到useStore hook：

import { useStore } from 'react-redux';

const SomeContainer = () => {
    const dispatch = useDispatch();
    const store = useStore(); // 获取Store实例

    const variableFromStore = useSelector(someSelectors.variableFromStore);
    console.log(variableFromStore)

    const handleSomeAction = () => {
        // 实时从Store获取最新值
        const latestValue = someSelectors.variableFromStore(store.getState());
        console.log(latestValue);
    };

    return <SomeComponent onSomeAction={handleSomeAction} />;
};

这种方式不需要修改SomeComponent的代码，但需要确保能正确访问到Store实例。

内容的提问来源于stack exchange，提问作者ForeverJunior