React + Redux + Redux Saga - 处理加载标志的最佳方式

Question

我有一个显示用户列表的基本组件，当安装组件时，我使用useEffectAPI 调用来加载数据，而在加载数据时，我想在 UI 中显示加载程序。

我的理解是，loader 标志应该保留在 React 组件的状态中，因为它代表该组件的状态，而不是在 redux 存储中，因为 redux 存储代表/保存整个应用程序的状态，例如登录的用户、用户列表等，而不是每个应用程序反应组件的可能状态，从应用程序架构的角度来看，这种想法是错误的还是不正确的？

我的推理是，如果我们要在 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 这样的东西中，那么你也会卸载你的加载标志。

这样做的原因是您将所有相关的问题放在一起。将数据加载和数据加载标志保留在应用程序的不同部分是没有意义的。这不仅会增加工作量，而且如果将它们放在一起，则可以更轻松地切换由哪个组件加载哪些数据；这是一个整体。

话虽如此，我要做的是对于每个数据获取操作，我都会有 3 个 redux 操作：

LOAD_DATA_REQUEST // triggers saga and sets redux loading flag to true
// both of the following actions are called by your saga and simultaneously set
// loading flag to false and either set received data in redux or set an error state
LOAD_DATA_SUCCESS
LOAD_DATA_ERROR

现在，从您想要的任何组件中，您只需调用一个操作，其余的操作就由该操作处理。

这只是我的意见，有多个“正确”答案，但这通常是我的做法，而且效果很好。