在这里，我尝试在登录后将用户信息从redux状态转到主页，但问题是由于useEffect挂接，组件刷新并丢失了存储的所有redux数据，而且我不能使用checkUser()方法来检索用户数据，因为它会导致无限渲染问题并破坏应用程序。所以你能帮我从redux状态中获取数据而不刷新组件吗。

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { checkUser } from '../../actions/userActions';
import { connect } from 'react-redux';
import './main.css';


function Main(props){

    const [loggedIn, setLoggedIn] = useState(false)

    useEffect(() => {
        props.checkUser();
        setLoggedIn(props?.user?.isLoggedIn)
    },[checkUser])

    useEffect(() => {
        console.log(loggedIn)
    }, [loggedIn])
    

    let menuOpened = false;

    const menuToggle = (element) => {
        element.preventDefault();
        let menuButton = document.querySelector('.menu-btn');
        let responsiveMenu = document.querySelector('.toggle-menu');

        if(!menuOpened){
            menuButton.classList.add('open');
            responsiveMenu?.classList.add('opened');

        }else if(menuOpened){
            menuButton.classList.remove('open');
            responsiveMenu?.classList.remove('opened');
        }
        menuOpened = !menuOpened ;
    }

    const search = (e) => {
        e.preventDefault();
    }

    return ( 
        <div>
            <h1 id='Title'>Your favorite<br></br>Gifts shop</h1>
        
            <nav id='navbar'>
                <div className='menu-btn' onClick={menuToggle}>
                    <div className='menu-btn-burger'></div>
                </div>
                <ul className='toggle-menu'>
                    <li className="toggle-menu-items">
                        <Link className='toggle-menu-anchors' {...(loggedIn ? {to:'/user-profile'} : {to:'/user-form'})}>Profile</Link>
                    </li>
                    <li className="toggle-menu-items">
                        <Link className='toggle-menu-anchors' to='/cart'>Cart</Link>
                    </li>
                    <li className="toggle-menu-items">
                        <Link className='toggle-menu-anchors' to='/support'>Support</Link>
                    </li>
                </ul>
                <ul>
                    <li className='menu' id='menu1'><Link className='anchor-menu' {...(loggedIn ? {to:'/user-profile'} : {to:'/user-form'})}>Profile</Link></li>
                    <li className='menu' id='menu2'><Link className='anchor-menu' to='/cart'>Cart</Link></li>
                    <li className='menu' id='menu3'><Link className='anchor-menu' to='/support'>Support</Link></li>
                </ul>
                <form id='mainForm'>
                    <input id='mainInput'/>
                    <button id='search' onClick={search}>search</button>
                </form>
            </nav>
        </div>
    );

    
}

const mapUserStateToProps = (state) => {
    return{
        user : state?.myUser || [],
    }
}




export default connect(mapUserStateToProps, {checkUser})(Main);