在任何页面中重新加载时，如何正确地获取数据？
在任何页面中重新加载时，如何正确地获取数据？
提问于 2021-10-20 10:05:39
所以我在我的应用程序的登录页面上从我的后端获取数据。这些数据在不同的部分中使用，所以我使用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的东西，它将重新运行用户可能是的任何页面。谢谢!
Stack Overflow用户
发布于 2021-10-20 11:15:54
在useEffect中调用fetchData的方法有一个问题。如果将其扩展到多个组件，则最终将多次调用fetchData。
这个问题没有灵丹妙药的解决方案。然而，一种可重用的解决方案是分派一个初始化器操作，并使用异步thunk侦听所需的reducer，并水合其自己的存储属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69644032
复制相关文章
相似问题
腾讯云开发者
