5. Xây dựng Logout của AuthenticatedGuard (ok)

C:\Users\Administrator\Desktop\typescript\src\components\Header\index.tsx

import React from 'react';
import { LogoutIcon } from './Header.styles';
import { PATH } from './../../constants/paths';
import { useHistory } from 'react-router-dom';
import { connect } from 'react-redux';
import { logout } from './../../actions';
import * as interfaces from './../../interface';
interface ReduxProps {
  logoutDispatcher(): void
}
interface Props extends ReduxProps {}
const Header = (props: Props) => {
  const history = useHistory();
  const { logoutDispatcher } = props;
  const handleLogout = () => {
    logoutDispatcher()
    history.push({ pathname: PATH.LOGIN });
  }
  return (
    <header className="d-flex bg-light justify-content-between p-3 shadow-sm">
      <button className="btn btn-primary">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          height="20"
          viewBox="0 -53 384 384"
          width="20"
        >
          <g>
            <path
              d="m368 154.667969h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"
              data-original="#000000"
              data-old_color="#000000"
            />
            <path
              d="m368 32h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"
              data-original="#000000"
              data-old_color="#000000"
            />
            <path
              d="m368 277.332031h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"
              data-original="#000000"
              data-old_color="#000000"
            />
          </g>
        </svg>
      </button>
      <LogoutIcon onClick={handleLogout} className="btn btn-outline-secondary">
        Logout
      </LogoutIcon>
    </header>
  )
}
const mapStateToProps = state => ({})
const mapDispatchToProps = dispatch => {
  return {
    logoutDispatcher: () => {
      dispatch(logout())
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Header);

C:\Users\Administrator\Desktop\typescript\src\actions\index.tsx

import * as types from './../constants/login';
export const loginRequested = ():any => ({
  type: types.LOGIN_REQUESTED
})
export const loginSuccess = (payload:any) => ({
  type: types.LOGIN_SUCCESS,
  payload
})
export const loginFailed = (payload:any) => ({
  type: types.LOGIN_FAILED,
  payload
})
export const logout = () => ({
  type: types.LOGOUT
})