reactjs - 单个调度中的多个操作（React-Redux Hooks）

Question

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

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。只需使用带有钩子的反应上下文。