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

【问题标题】：React + Redux + Redux Saga - best way to handle loading flagReact + Redux + Redux Saga - 处理加载标志的最佳方式
【发布时间】：2020-01-14 14:32:09
【问题描述】：

我有一个显示用户列表的基本组件，当组件被挂载时，我使用useEffect 进行 API 调用来加载数据，而在数据加载时我想在 UI 中显示加载器。

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

我的理由是，如果我们要在 redux store 中存储加载标志，那么为什么还要使用 react 组件的 state 而不仅仅是使用 redux store？

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

反应组件

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} />
    );
}

【问题讨论】：

您可以尝试使用自定义减速器和操作来跟踪请求状态。像setRequestStatus(requestId, REQUEST_STATUS.LOADING) 这样的东西。将其与选择器混合使用，您将获得一种清晰灵活的方式来了解每个请求状态:)。
我想这取决于您是在加载数据时想要在整个页面上使用“垫片”，还是仅仅覆盖将显示数据的组件。你要哪一个？
只显示特定组件的加载器（而不是整个页面上的 shim），因为我认为它可以直观地了解 UI 的哪个部分正在等待数据。

标签： javascript reactjs redux redux-saga

【解决方案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

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

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

【讨论】：