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

Question

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

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

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

如果不是，那么实现这一目标的最简单方法是什么？

react 组件

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

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

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