单个调度中的多个操作(React-Redux 钩子)

Question

我正在使用react-redux钩子来编写登录/注销系统。 目前我面临一个问题，在logout((和login1((内部只会运行第一个调度。是否有一些研究发现redux-thunks可能可以解决这个问题，但会感到困惑，因为redux-thunks更有可能加载数据。有人对此有任何想法吗？？

import React from "react"
import {chgStatus,chgName,chgPw} from "../Actions"
import {useSelector,useDispatch,shallowEqual} from "react-redux";
import {useHistory} from "react-router-dom";
import '../App.css'
const LoginOutBtn =()=>{
const {name,password,status} = useSelector(state=>({
name: state.name,
password: state.password,
status: state.status
}),shallowEqual);
const dispatch = useDispatch()
const history = useHistory()
const loginStatus = status?
<span>登出</span> : 
<span>登入</span>
const logout=()=>dispatch(
chgStatus(!status),
// chgName("logout"),
//chgPw("123"),
console.log(status,name,password,456),
history.push("/subPage1")
)
const login=()=>dispatch(
chgStatus(!status),
chgName("Qweq"),
chgPw("pw"),
console.log(status,name,password,123),
history.push("/subPage2")
)
const login1 =()=>{
dispatch(
dispatch(chgStatus(!status)),
dispatch(chgName("Qweq")),
dispatch(chgPw("pw")))
console.log(status,name,password,123)
history.push("/subPage2")
}

const handleClick=()=>{
if(status){     
logout()
}else if(status === false){
login1()
}
console.log(status,name,password,789)
// logout()
//   console.log(status,name,password,"logout")
// login1()
//   console.log(status,name,password,"login")
}

return(
<>
<button
className="btn"
onClick={handleClick}
>
{loginStatus}
</button>
</>
)
}
export default LoginOutBtn

Answer 1

您没有正确使用 redux。

// Actions
function Login(name, password) => ({ type: 'LOGIN', payload: { name, password }});
function Logout() => ({ type: 'LOGOUT' });
// Reducer
function Reducer(state, action) {
...
case 'LOGIN': {
return { ...state, ...action.payload, status: true };
}
case 'LOGOUT': {
return { ...state, status: false };
}
...
}

但是，我仍然建议根本不使用 redux。只需将反应上下文与钩子一起使用即可。