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

Posted 2023-03-10

【中文标题】React-Redux-SimpleJWT - TypeError：注销不是函数

【英文标题】：React-Redux-SimpleJWT - TypeError: logout is not a function

【发布时间】：2021-10-11 18:59:17

【问题描述】：

使用 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。

【参考方案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);

【讨论】：

效果很好！对于 useDispatch，我将完成其余部分的操作。谢谢！