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;