mapActionsToProps Functional component vs Class

Question

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

Answer 1

This is just to help anyone like me to get up to speed converting a Class Component to Functional where you need to map state and Actions to prop. Below is the working code as a functional component.

import React from 'react'
import { useNavigate } from 'react-router-dom';
import { connect } from 'react-redux'

import {logoutUser} from '../Redux/Actions/userActions'

const NotFound = (props) => {
  const navigate = useNavigate();

  const handleLogout = () => {
    navigate(-1);
    props.logoutUser();
    };

  const { credentials: {handle}} = props.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 />
             <h3>You have come to a "404 Page Not Found", Error Page</h3> 
             <br />
             <p>Maybe you should head back to some safer waters</p>
             <button onClick={handleLogout}>go back</button>
           </div>
          </div>
         </div>
       </div>
  )
}
const mapStateToProps = state => ({
    user: state.user
});
const mapActionsToProps = {
  logoutUser
};
 export default connect(mapStateToProps,mapActionsToProps)(NotFound);

Most everyone else will read and say "Dah! this is obvious"; but it may just help someone out. And all the other examples I found were more complex than this which made it hard for at least my little brain to follow;)