mapActionsToProps 功能组件 vs Class

Question

有一个 Class 组件 mapActionsToProp 并且工作正常 -

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 );

上面导入了logoutUser，然后在调用onClick 的函数中使用它。我正在尝试做同样的事情，但在一个功能组件中。像这样-

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);

很抱歉第一次出现错误的格式，但这实际上是关于如何在功能组件中实现 mapActionsToProp。干杯，再次感谢您的帮助

Answer 1

此处的正确答案是：使用 React-Redux 钩子 API（useSelector 和 useDispatch），而不是遗产 connect API.

我们在 Redux 核心文档教程中教授如何使用挂钩：

Answer 2

这只是为了帮助像我这样的人加快将 Class 组件转换为功能组件的速度，您需要将状态和操作映射到道具。下面是作为功能组件的工作代码。

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);

大多数其他人会读到并说“啊！这很明显”；但它可能只是帮助某人。我发现的所有其他示例都比这个更复杂，这至少让我的小脑袋难以理解；）

mapActionsToProps 功能组件 vs Class

mapActionsToProps Functional component vs Class

javascript

reactjs

redux