javascript - 如何检查 redux hook 中 dispatch 的返回值

Question

我正在尝试使用 React 和 Redux 制作用户登录页面。

//loginAction.js
export function loginRequest(user){
    return{
        type: types.LOGIN_REQUEST,
        user
    }
}
export function loginSuccess(user){
    return{
        type: types.LOGIN_SUCCESS,
        user
    }
}
export function loginFailure(err){
    return{
        type: types.LOGIN_FAILURE,
        err
    }
}

export function login(username, password){
    return function(dispatch) {
        dispatch(loginRequest({ username }));
        userApi.userLogin(username, password)
          .then(
              user => {
                dispatch(loginSuccess(user));
              },
              err => {
                dispatch(loginFailure(err.toString()))
              }
          )
    }
}

//userReducer.js
const login = (state=initialState, action) => {
    switch(action.types){
        case types.LOGIN_SUCCESS:
        case types.LOGIN_REQUEST:
            return  {
                loggedIn: true,
                user: action.user
            }
        case types.LOGIN_FAILURE:
            return {}
        default:
            return state
    }
};

LoginPage.js
import React, { useState, useEffect} from 'react';
import PropTypes from 'prop-types';
import {useDispatch, useSelector} from 'react-redux';
import {Redirect} from 'react-router-dom';

import {login} from '../redux/actions/loginAction'

const LoginPage = () => {
    const [inputs, setInputs] = useState({
        username: '',
        password: ''
    })
    const [isauthenticated, setIsAuthenticated] = useState(false);

    const { username, password } = inputs
    const dispatch = useDispatch();
    const loggingIn = useSelector(state => state.user);


    const handleChange = (e) => {
        const {name, value} = e.target;
        setInputs(inputs =>({...inputs, [name]: value}))
    }

    const handleSubmit = (event) => {
        event.preventDefault();
        // setIsAuthenticated(true)
        // this line needs to be improved
        if( username && password ){

            dispatch(login(username, password))
        }
    }

    return(
        <div className='field col-xs-5 col-lg-3'>
            {
                isAuthenticated ?
                <Redirect to='/uploadfile' /> :
                (
                    <form onSubmit={handleSubmit}>
                        <input
                        type="text"
                        onChange={handleChange}
                        name="username"
                        label="username"
                        className="form-control"
                        placeholder="ID"
                        value={username}
                        />
                        <input
                        type="password"
                        onChange={handleChange}
                        name="password"
                        label="password"
                        className="form-control"
                        placeholder="Password"
                        />
                        <button type="submit" className="btn btn-primary">
                            Submit
                        </button>
                    </form>
                )
            }

        </div>

    )
}

export default LoginPage;

在 LoginPage 组件中，我有 isAuthenticated 状态，当它的操作返回“LOGIN_SUCCESS”时我想设置为 true，而不是总是设置为 true。
有没有办法像这样检查它？

 const handleSubmit = (event) => {
        event.preventDefault();
        // setIsAuthenticated(true)

        if( username && password ){

            // can I do?
            if(dispatch(login(username, password)) === 'types.LOGIN_SUCCESS'){
                setIsAuthticated(true)
             }

        }
    }

Answer 1

const login = (state=initialState, action) => {
    switch(action.types){
        case types.LOGIN_REQUEST:
            return  {
                loggedIn: false,
                user: null
            }
        case types.LOGIN_SUCCESS:
            return  {
                loggedIn: true,
                user: action.user
            }
        case types.LOGIN_FAILURE:
            return  {
                loggedIn: false,
                user: null
            }
        default:
            return state
    }
};

我会这样写，你在 login_success 之前没有登录。在 loginform 中，你应该只检查 props - loggedIn 和 user。