单次分派中的多个操作（React-Redux Hooks）

Question

我正在使用 react-redux hooks 编写 login/logout 系统。目前我面临一个问题，在 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。只需使用带钩子的反应上下文。

单次分派中的多个操作（React-Redux Hooks）

Multiple actions in single dispatch (React-Redux Hooks)

reactjs

react-redux

react-thunk

react-hooks