React-Redux-SimpleJWT - TypeError: logout is not a function

Question

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

错误：

 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中dispatch action还是用useDispatch hook比较好，而且你的action必须是plain objects，其实dispatch的场景应该移到你的component里面，主要的问题出在 Containers/Home.js，你忘了破坏你的道具。这是仔细工作的示例代码：

Actions/Auth.js:

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

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

React-Redux-SimpleJWT - TypeError: logout is not a function

React-Redux-SimpleJWT - TypeError: logout is not a function

jwt

reactjs

redux

react-redux

django-rest-framework-simplejwt