React + Redux + Redux Saga-处理加载标记的最佳方法

Question

[我有一个显示用户列表的基本组件，在安装组件时，我正在使用useEffect进行API调用，该调用将在数据加载时加载数据，而我想在UI中显示加载器。

我的理解是loader标志应保持在react组件的状态，因为它表示该组件的状态，而不在redux存储中，因为redux存储代表/保存了整个应用程序的状态，就像登录用户一样，用户列表等，而不是React组件的每个可能状态，从应用程序体系结构的角度来看，这种想法是对还是错？

我的理由是，如果我们要将加载标志存储在redux存储中，那么为什么要完全使用react组件的状态而不是仅仅使用redux存储呢？

如果否，那么最简单的方法是什么？

反应成分

function List(props) {
    const [loading, setLoading] = useState(false);
    const reduxData = useSelector((store) => {
        return {
            users: store.users.list,
        };
    });

    useEffect(() => {
        //show loader
        setLoading(true);
        //wait until data is loaded
        props.requestRequests();
        // hide loader
        setLoading(false);
    }, []);

    if (loading) {
        return (
           <Loader />
        )
    }

    return (
        <Table users={reduxData.users} />
    );
}

Answer 1

这更多是一个意见问题，它取决于您如何构造数据加载操作，但是我认为，如果将数据提取卸载到redux和redux saga之类的东西，那么您也将卸载装载标志。

这样做的原因是您将所有相关的关注点放在一起。将数据加载和数据加载标记保留在应用程序的不同部分中没有任何意义。不仅工作量更大，而且如果将它们放在一起，则可以更轻松地切换出哪些数据由哪个组件加载。全部都是一个单元。