Как я могу проверить возвращаемое значение отправки в хуке redux - PullRequest
2 голосов
/ 07 мая 2020

Я пытаюсь создать страницу входа в систему с помощью response и 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. Есть ли способ это проверить, вот так?

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

        if( username && password ){

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

        }
    }

1 Ответ

0 голосов
/ 07 мая 2020
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. А внутри формы входа вы должны проверять только реквизиты - loggedIn и user.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...