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;