mapActionsToProps Functional component vs Class

Have a Class Component that mapActionsToProp and works just fine -

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Link } from 'react-router-dom';
import {logoutUser} from '../Redux/Actions/userActions'


export class notFound extends Component {
  handleLogout =() => {
    this.props.logoutUser();
};
  render() {

    const { user: { credentials: { handle}}} = this.props;
        return (
        <div className='body' style={Styles.body}>
           <div className='loaderPanel' style={Styles.loaderPanel}>
             <div className='loaderPanelInner' style= 
  {Styles.loaderPanelInner}>
                <div className='Welcome' style={Styles.welcome}>
                  <h1> What are you doing {handle}!! </h1>
                  <p>You are definitely lost...</p> <br />
                  <p>You have come to a "404 Page Not Found", Error 
Page</p> <br />
               <p>Maybe you should head back to some safer 
waters</p>
               <Link to="/" onClick={this.handleLogout} >go 
back</Link>
                </div>
             </div>
           </div>
         </div>
        )
   }
 }

 const mapStateToProps = (state) => ({
   user: state.user
});
const mapActionsToProps = {
   logoutUser
}
export default connect(mapStateToProps,mapActionsToProps) 
(notFound );

The Above imports the logoutUser and then uses it in a function that is called onClick. I am trying to do the same but in a functional component. Something like this-

import React from 'react'
import { connect } from 'react-redux'

import {logoutUser} from '../Redux/Actions/userActions'
const notFound = (user) => {

  const handleLogout = (logoutUser) => {
    logoutUser.logoutUser()
    };

  const { user: { credentials: {handle}}} = user;
return (
<div className='body' style={Styles.body}>
 <div className='loaderPanel' style={Styles.loaderPanel}>
 <div className='loaderPanelInner' style={Styles.loaderPanelInner}>
 <div className='Welcome' style={Styles.welcome}>
   <h1> What are you doing {handle}!! </h1>
   <p>You are definitely lost...</p> <br />
   <p>You have come to a "404 Page Not Found", Error Page</p>
   <br />
   <p>Maybe you should head back to some safer waters</p>
 <button onClick={handleLogout}>Change check1</button>
 </div>
 </div>
 </div>   
 </div>
  )
 }
const mapStateToProps = state => ({
    user: state.user
})
const mapActionsToProps = {
  logoutUser: logoutUser
}

export default connect(mapStateToProps,mapActionsToProps) 
(notFound);

Sorry for the bad formatting the first time but its really about how to implement the mapActionsToProp in a functional component. Cheers and thanks for the help again

Solution

The right answer here is: use the React-Redux hooks API ( useSelector and useDispatch ) , rather than the legacy connect API.

We teach how to use the hooks in our Redux core docs tutorials: