Несколько действий в одной отправке (React-Redux Hooks) - PullRequest
Новая
       52

Несколько действий в одной отправке (React-Redux Hooks)

0 голосов
/ 29 января 2020

Я использую реагировать на редуксы , чтобы написать систему входа / выхода. В настоящее время я сталкиваюсь с проблемой, когда внутри logout () & login1 () будет только запускать только первую отправку . Некоторые исследования показали, что избыточные-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

1 Ответ

0 голосов
/ 29 января 2020

Вы используете неправильный редукс неправильно. 

// 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 };
}
...
}

Однако я все же рекомендую вообще не использовать редукс. Просто используйте контекст реакции с хуками.

...