React-Redux-SimpleJWT - TypeError：注销不是函数

Question

使用 React-Redux 和 Simple JWT 运行 Django Rest。刚刚完成身份验证。除了注销之外，我的身份验证一切正常。当我单击注销时，它告诉我该操作不是函数。

错误：

 TypeError: logout is not a function
    logout_user
    src/containers/Home.js:13
      10 | const [redirect, setRedirect] = useState(false);
      11 | 
      12 | const logout_user = () => {
    > 13 |     logout();
   ^  14 |     setRedirect(true);
      15 | };
      16 | 

Actions/Auth.js：

export const logout = () => dispatch => {
dispatch({
    type: LOGOUT
});

Reducers/Auth.js：

case LOGOUT:
        localStorage.removeItem('access');
        localStorage.removeItem('refresh');
        return {
            ...state,
            access: null,
            refresh: null,
            isAuthenticated: false,
            user: null
        }

Containers/Home.js：

import React, { Fragment, useState } from 'react';
import { Link, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import logo from '../assets/logo.png'
import { logout } from '../actions/auth';



const Home = ( logout, isAuthenticated) => {
    const [redirect, setRedirect] = useState(false);

    const logout_user = () => {
        logout();
        setRedirect(true);
    };

    const guestLink = () => (
        <Fragment>
            <li className='login-link'>
                <Link to='/login'>Login</Link>
            </li>
        </Fragment>
    );

    const authLinks = () => (
        <li className='login-link'>
            <a  onClick={logout_user}>Logout</a>
        </li>
    );

...

const mapStateToProps = state => ({
    isAuthenticated: state.auth.isAuthenticated
});

export default connect(mapStateToProps, { logout })(Home);

不确定我在这里缺少什么。浏览了每个文件，并尝试修改每个文件，但 nada。

Answer 1

我觉得在redux中用useDispatch钩子来dispatch一个action比较好，而且你的action必须是普通对象，但实际上dispatch的场景应该移到你的组件上，主要问题在@ 987654322@，你忘了解构你的道具。这是仔细工作的示例代码：

操作/Auth.js：

const logout = () => ({
    type: "LOGOUT",
});

容器/Home.js：

const Home = ({ logout, isAuthenticated }) => {
    const [redirect, setRedirect] = useState(false);
    const dispatch = useDispatch();

    const logout_user = () => {
        dispatch(logout());
        setRedirect(true);
    };

    const guestLink = () => (
        <Fragment>
            <li className="login-link">
                <Link to="/login">Login</a>
            </li>
        </Fragment>
    );

    const authLinks = () => (
        <li className="login-link">
            <a onClick={logout_user}>Logout</a>
        </li>
    );
};

const mapStateToProps = state => ({
    isAuthenticated: state.auth.isAuthenticated
});

export default connect(mapStateToProps, { logout })(Home);