project-codepen/src/components/UserHeader.js

import { connect } from "react-redux";
import { actionAuthLogout } from "../actions/actionAuthLogout";
import "./Header.css";

const NickName = ({ nick, onLogOut }) => {
    return (
      <>
        <div className='logaut'>
            <a href = '/cabinet'>{nick}</a>
            <a href="/cabinet">
                <button className='cabinet'>
                    My Cabinet
                </button>
            </a>
            <a href = '/'><button onClick = {() => (onLogOut())}>Log out</button></a>
        </div>
      </>
    )
}
    
const ConnectedNick = connect((state) => ({nick: state?.a?.payload?.sub?.login, logedIn: state.a.token}),{onLogOut:actionAuthLogout})(NickName);
export default ConnectedNick;