Как частично поменять содержимое компонента при получении ответа от сервера? (react/redux-saga)

Есть компонент Header:

import * as React from 'react';
import { Link, NavLink } from 'react-router-dom';

import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

export default function ButtonAppBar() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
            <NavLink to="/">
              Home
            </NavLink>
            <Box style={{ display: 'flex', justifyContent: 'space-between', width: '150px' }}>
              <Link to="/login" color="inherit" className="links">Login</Link>
              <Link to="/registration" color="inherit" className="links">Registration</Link>
            </Box>
          </div>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

Нужно при получении успешного статуса ответа от сервера поменять Link'и регистарции/логина на Link личного кабинета пользователя. Примерно представляю себе это так:

isAuth
? <Link to="/profile" color="inherit" className="links">Profile</Link>
:(
<>
<Link to="/login" color="inherit" className="links">Login</Link>
<Link to="/registration" color="inherit" className="links">Registration</Link>
</>
)

Так вот, как мне получать isAuth true, когда клиент авторизован?


Ответы (0 шт):