javascript - Redux - mapDispatchToProps 不适用于注销功能
问题描述
在我的应用程序中,我有一个注销按钮,但它不会将您注销。我检查了减速器和动作,它们看起来还不错,因为我有另一个类似的应用程序,它在那里工作。
这是正在导入注销操作的“Nav.jsx”组件。
import React from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
import {logoutUser} from '../actions/logout'
class Nav extends React.Component {
constructor(props) {
super(props)
this.state = {
showBurger: false,
loggedOut: false
}
this.toggleBurger = this.toggleBurger.bind(this)
this.logout = this.logout.bind(this)
}
toggleBurger() {
this.setState({showBurger: !this.state.showBurger})
}
logout () {
this.props.dispatch(logoutUser())
this.setState({loggedOut: true})
}
render() {
//
const {auth} = this.props
const {showBurger} = this.state
const {loggedOut} = this.state
console.log("is this logout?", this.logout.bind(this))
return <nav className="navbar">
<div className="container">
<div className="navbar-brand">
<span onClick={this.toggleBurger} className={`navbar-burger burger ${showBurger ? 'is-active': ''}`} data-target="navbarMenuHeroA">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenuHeroA" className={`navbar-menu ${showBurger ? "is-active" : ''}`}>
<div className="navbar-end">
<Link onClick={this.toggleBurget} className="navbar-item" to='/found'>Found</Link>
<Link onClick={this.toggleBurget} className="navbar-item" to='/lost'>Lost</Link>
{auth.isAuthenticated
? <span>
<Link onClick={this.toggleBurget} className="navbar-item" to='/foundform'>Foundform</Link>
<Link onClick={this.toggleBurget} className="navbar-item" to='/lostform'>Lostform</Link>
<Link to="/" onClick={() => this.logout.bind(this)} className="navbar-item">Logout</Link>
</span>
: [
<Link onClick={this.toggleBurger} className="navbar-item is-large" to='/login'>Login</Link>,
<Link onClick={this.toggleBurger} className="navbar-item" to='/register'>Register</Link>,
]
}
</div>
</div>
</div>
</nav>
}
}
const mapDispatchToProps = (dispatch) => {
return {
logout: () => dispatch(logoutUser())
}
}
const mapStateToProps = ({auth}) => {
return {auth}
}
export default connect(mapStateToProps, mapDispatchToProps)(Nav)
当我运行它时,console.log 给我“这是注销吗?ƒ () { [native code] }”,我也收到此警告:“哈希历史记录无法推送相同的路径;新条目将不会添加到历史堆栈”。这是一个我现在自己在做的小组项目,我不知道到底出了什么问题?请帮忙。
如果有帮助,这是注销操作。
import { removeUser } from '../utils/auth'
function requestLogout () {
return {
type: 'LOGOUT_REQUEST',
isFetching: true,
isAuthenticated: true
}
}
function receiveLogout () {
return {
type: 'LOGOUT_SUCCESS',
isFetching: false,
isAuthenticated: false
}
}
// Logs the user out
export function logoutUser () {
return dispatch => {
document.location = "/#/"
dispatch(requestLogout())
removeUser()
dispatch(receiveLogout())
}
}
这是应用程序中的更多文件。这是 reducers 文件夹中的 auth.js。
import { isAuthenticated, getUserTokenInfo } from '../utils/auth'
const initialState = {
isFetching: false,
isAuthenticated: isAuthenticated(),
user: getUserTokenInfo(),
errorMessage: ''
}
export default function auth (state = initialState, action) {
switch (action.type) {
case 'LOGIN_REQUEST':
return {
...state,
isFetching: true,
isAuthenticated: false,
errorMessage: ''
}
case 'LOGIN_SUCCESS':
return {
...state,
isFetching: false,
isAuthenticated: true,
user: action.user
}
case 'LOGIN_FAILURE':
return {
...state,
isFetching: false,
isAuthenticated: false,
errorMessage: action.message
}
case 'LOGOUT_SUCCESS':
return {
...state,
isFetching: false,
isAuthenticated: false,
user: null
}
case 'REGISTER_REQUEST':
return {
...state,
isFetching: true,
isAuthenticated: false,
errorMessage: ''
}
case 'REGISTER_FAILURE':
return {
...state,
isFetching: false,
isAuthenticated: false,
errorMessage: action.message
}
default:
return state
}
}
以及组合了减速器的 index.js。
从“redux”导入 {combineReducers}
import auth from './auth'
import lostPets from './lostPets'
import found from './foundPets'
export default combineReducers({
auth,
found,
lostPets
})
解决方案
您需要直接调用该函数而不是使用 dispatch 因为您已经在使用mapDispatchToProps
,如果您不提供mapDispatchToProps
,dispatch
将提供给组件
import React from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
import {logoutUser} from '../actions/logout'
class Nav extends React.Component {
constructor(props) {
super(props)
this.state = {
showBurger: false,
loggedOut: false
}
this.toggleBurger = this.toggleBurger.bind(this)
this.logout = this.logout.bind(this)
}
toggleBurger() {
this.setState({showBurger: !this.state.showBurger})
}
logout () {
this.props.logout() // call logout here from props
this.setState({loggedOut: true})
}
render() {
//
const {auth} = this.props
const {showBurger} = this.state
const {loggedOut} = this.state
console.log("is this logout?", this.logout.bind(this))
return <nav className="navbar">
<div className="container">
<div className="navbar-brand">
<span onClick={this.toggleBurger} className={`navbar-burger burger ${showBurger ? 'is-active': ''}`} data-target="navbarMenuHeroA">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenuHeroA" className={`navbar-menu ${showBurger ? "is-active" : ''}`}>
<div className="navbar-end">
<Link onClick={this.toggleBurget} className="navbar-item" to='/found'>Found</Link>
<Link onClick={this.toggleBurget} className="navbar-item" to='/lost'>Lost</Link>
{auth.isAuthenticated
? <span>
<Link onClick={this.toggleBurget} className="navbar-item" to='/foundform'>Foundform</Link>
<Link onClick={this.toggleBurget} className="navbar-item" to='/lostform'>Lostform</Link>
<Link to="/" onClick={() => this.logout.bind(this)} className="navbar-item">Logout</Link>
</span>
: [
<Link onClick={this.toggleBurger} className="navbar-item is-large" to='/login'>Login</Link>,
<Link onClick={this.toggleBurger} className="navbar-item" to='/register'>Register</Link>,
]
}
</div>
</div>
</div>
</nav>
}
}
const mapDispatchToProps = (dispatch) => {
return {
logout: () => dispatch(logoutUser())
}
}
const mapStateToProps = ({auth}) => {
return {auth}
}
export default connect(mapStateToProps, mapDispatchToProps)(Nav)
推荐阅读
- php - 如何使用 SQL LIKE 运算符在 PHP 中使用 PDO 准备语句
- php - 睡眠进程过多(MySQL)
- python - 使用 AWS ALB / Cognito 进行身份验证
- postgresql - SELECT DISTINCT 只能出现一次的行
- python - pip install 从哪个 url 获取它的文件?
- image-processing - iiifhosting 站点如何将图像处理为向上/向下缩放以使其与 iiif 兼容?
- reactjs - React useEffect hook 在调度动作时禁用额外的渲染
- javascript - $page.props.csrf_token 是 undefiend (inertiajs)
- python - 尝试从本地字典中查找要发布的图片时出现 Discord.py bot 错误
- node.js - Nginix入口的Websocket问题