React-Redux-SimpleJWT - TypeError: logout不是一个函数 &g

Question

使用React-Redux和Simple JWT运行Django Rest。就快完成身份验证了。我的身份一切都很好，除了登出。当我点击logout时，它告诉我这个动作不是一个函数。

错误:

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 | 

行动/Auth.js:

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

异径接头/Auth.js:

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

容器/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);

不知道我在这里错过了什么。我遍历了每个文件并尝试重做，但一无所获。

Answer 1

我认为在redux中最好使用useDispatch钩子来调度一个动作，并且你的动作必须是普通对象，但实际上，调度的场景应该移动到你的组件中，主要问题是在Containers/Home.js中，你忘记了分解你的道具。下面是仔细工作的示例代码:

行动/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);