关于在useEffect中获取后端数据存入redux，子页面不显示的问题？

Question

我有两个页面A和B，其中B是A的子部件（A还有其他的子部件），使用路由访问，我在A的useEffect中从后端API获取数据并存到redux中，然后在B的useEffect方法中从redux取出数据并赋值给B页面的useState变量，并在B页面组件中输出，但是现在问题如下：
如果我在B部件的路由地址下，刷新网页，A部件可以获取到后端数据并成功写入redux，但是在B页面并不能显示对应变量的值，经过我的调试发现是因为A页面从后端请求数据异步赋值的原因，B页面元素渲染好的时候，A页面从后端获取的值尚未写入redux，所以B页面就从redux取不到值，这时候如果路由切换到C页面再切换回B页面是可以成功显示变量值的
我目前解决方案如下：在A页面从后端取值的时候设置变量，阻塞A页面子部件（如B页面）的渲染，后端成功返回值后才进行渲染，这样在B页面下刷新网页就可以成功显示对应变量，但是这样部件会被渲染两次（一次是初始渲染，一次是获取到值后渲染）
我想问一下这种情况的标准解决方案是什么？是我的redux用法有问题吗

B页面设置变量代码如下，其中joinTime、userName、phone、icon都是B页面的state变量，globalUserInfo是redux中的变量，是在A页面获取的

useEffect(() => {
    if (isLogined()) {
        const { icon, joinTime, phone, userName } = globalUserInfo
        setJoinTime(joinTime)
        setUserName(userName)
        setPhone(phone)
        setIcon(icon)
    } else {
        warning('用户未登录')
    }
}, []);

A页面从后端获取数据并存入redux代码如下

useEffect(() => {
    if (isLogined()) {
        setLoading(false)
        axios.get('api/user/info', {
            headers: { 'Authorization': getToken() }
        }).then((res) => {
            const data = res.data
            if (data.meta.status === 2000) {
                const userInfo = data.data.user
                const time = userInfo.join_time.split(" ")[0].split('-')
                setUserInfo({
                    'userName': userInfo.username,
                    'joinTime': time[0] + " 年 " + time[1] + " 月 " + time[2] + " 日",
                    'phone': userInfo.phone,
                    'icon': userInfo.icon,
                })
                setLoading(true)
            }
        })
}, [])

A页面大体可分为头部、主体、页脚，其中B页面（<UserInfo />）是A页面主体的一个子路由页面

<Route path="/user" element={
    <RequireAuth>
        <UserInfo />
    </RequireAuth>
} />

Answer 1

建议你使用 react-redux, 然后在 B 组件直接使用 useSelector 从 redux store 里取数据，能取到 username 之类的数据说明已经登录，无需再用 useEffect 和 isLogined()