React + Redux + Redux Saga - 處理加載標志的最佳方式

Question

我有一個顯示用戶列表的基本組件，當安裝組件時，我使用useEffect進行 API 調用來加載數據，而在加載數據時我想在 UI 中顯示加載器。

我的理解是加載器標志應該保持在反應組件的狀態，因為它代表該組件的狀態而不是在 redux 存儲中，因為 redux 存儲代表/保存整個應用程序的狀態，例如登錄用戶、用戶列表等，而不是每個反應組件的可能狀態，從應用程序架構的角度來看，這種想法是錯誤的還是不正確的？

我的理由是，如果我們要在 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} />
    );
}

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

現在，從您想要的任何組件中，您只需調用一個動作，其余的則由該動作處理。

這只是我的意見，有多個“正確”的答案，但這通常是我的做法，而且效果很好。