在任何页面中重新加载时如何正确重新获取数据？答案

【问题标题】：How to properly refetch data when reloading in any page?在任何页面中重新加载时如何正确重新获取数据？
【发布时间】：2021-12-07 03:49:31
【问题描述】：

所以我在我的应用程序的登录页面上从我的后端获取数据。这些数据用于不同的部分，所以我使用 redux 作为全局状态。代码是这样的：

//Landing Component
export default function Landing() {
    const data = useSelector(state => state.data);
    useEffect(() => {
        if (!data.isAvailable) {
            fetchData();
        }
        ...
    }, [])
    ...
}

//Some Component
export default function SomeComponent() {
    const data = useSelector(state => state.data)
    ...
}

//Another Component
export default function AnotherComponent() {
    const data = useSelector(state => state.data)
    ...
}

然而我们知道，如果用户刷新页面，存储在redux中的数据会被重新初始化。问题是，如果用户在其他页面上刷新，则不会重新获取数据。所以我要做的是在需要数据的每个其他组件中重复相同的useEffect，以便在用户在不同页面中重新加载时重新获取它。

//Some Component
export default function SomeComponent() {
    const data = useSelector(state => state.data)
    useEffect(() => {
        if (!data.isAvailable) {
            fetchData();
        }
        ...
    }, [])
    ...
}

我确信有更好的方法来做到这一点。我听说过通过localStorage 或使用redux-persist 来持久化数据。但是这个数据可能会变得非常大，所以我认为localStorage 不会这样做。类似于全局useEffect 的东西将重新运行用户可能在的任何页面。谢谢！

【问题讨论】：

标签： reactjs react-redux

【解决方案1】：

您在useEffect 中调用fetchData 的方法存在一个问题。如果你将它扩展到多个组件，你最终会多次调用fetchData。

对于这个问题没有灵丹妙药的解决方案。然而，一种可重用的解决方案是调度一个初始化操作并使用异步 thunk 侦听所需的减速器并水合它自己的存储属性。

【讨论】：