javascript - 使用 Promise React Redux 登录 : login:1 Uncaught (in promise)

Question

我正在尝试构建我的第一个 React+Redux 应用程序。仍处于脚手架阶段 + 我是 React 新手。

我创建了一个简单的登录应用，其中 AuthAction 从 login(username,password) 函数返回一个 Promise。如果 Promise 返回 resolve，则登录工作正常，但如果 Promise 返回 reject，我会收到此错误。

Uncaught (in promise)

这是我的操作:AuthAction.js

export function login(username, password){

return {
    type: 'LOGGED_IN',
    payload: new Promise((resolve, reject) => {

        if (username === 'ariful.haque@icarasia.com'){
            resolve(
                {   isLoggedIn: true,
                    shouldRedirect: true,
                    errorMessage: null,
                    user: {username: username, password: password}
                }
            );
        } else {
            console.log('send reject');
            reject(
                {   isLoggedIn: false,
                    shouldRedirect: false,
                    errorMessage: 'login failed',
                    user: null
                }

            );
        }

    })
};

}

这是我的Reducer:AuthReducer.js

const AuthReducer = (state =
                         {  isLoggedIn: false,
                            shouldRedirect: false,
                            user: null,
                            errorMessage: null
                         },
                        action) => {
                            switch (action.type) {
                                case 'LOGGED_IN_FULFILLED':
                                    console.log('authReducer: ', 'LOGGED_IN_FULFILLED', action);
                                    state = {
                                        ...state,
                                        user: action.payload.user,
                                        isLoggedIn: action.payload.isLoggedIn,
                                        shouldRedirect: action.payload.shouldRedirect,
                                        errorMessage: action.payload.errorMessage,
                                    };
                                    break;
                                case 'LOGIN_FAILED_FULFILLED':
                                    console.log('authReducer: ', 'LOGIN_FAILED_FULFILLED');
                                    state = {
                                        ...state,
                                        user: action.payload,
                                        isLoggedIn: action.payload.isLoggedIn,
                                        shouldRedirect: action.payload.shouldRedirect,
                                    };
                                    break;
                                case 'LOGOUT':

                                    state = {
                                        ...state,
                                        user: action.payload.user,
                                        isLoggedIn: action.payload.isLoggedIn,
                                        shouldRedirect: action.payload.shouldRedirect,
                                    };
                                    break;                                   
                            }
                    return state;
};

export default AuthReducer;

这是登录页面容器

import React from 'react';
import {connect} from 'react-redux';


// Actions
import {login} from '../actions/AuthActions';

class LoginPage extends React.Component {

    //React Component Hook
    componentDidUpdate(){
        if (this.props.auth.isLoggedIn) {
            this.props.history.push('/dashboard');
        } else{
            console.log('auth props: ', this.props.auth);
        }
    }

    /**
     * Login function
     * @param event
     */
    testLogin = (event) => {
        event.preventDefault();

        console.log('login submit');
        this.props.login(this.refs.username.value, this.refs.password.value);
    };

    render() {

        //Set page title
        document.title = 'Login -  Seller Portal';

        return (
            <div style={{'padding': '10px','backgroundColor': '#ccc', 'border': '1px solid gray'}}>
                <p>You must log in to view the page at</p>
                <form id="login_form" onSubmit = { this.testLogin } >
                    <label>Username: <input type="text" name="username" ref="username" id="username" maxLength={20}/></label><br/>
                    <label>Password: <input type="password" name="password" ref="password" id="password" maxLength={20}/></label><br/>
                    <button type="submit">Log in</button>&nbsp;<br/>

                </form>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        auth: state.authReducer,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        login: (username, password) => {
            let l = login(username, password);
            console.log('mapDispatchToProps ', l);
            dispatch (l);
        }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(LoginPage);

我在我的 store.js 中使用 Thunk 和 Redux-Promise-Middleware

applyMiddleware(thunk, promise())

问题

1. 为什么我在拒绝时会收到此未捕获( promise 中) 错误？虽然resolve正在工作？
2. 在拒绝 Promise 时，如何在 LoginPage 组件中显示错误消息？

提前致谢。

Answer 1

稍微重新设计一下怎么样？ 行动:

function success(username, password) {
  return {
    type: 'LOGGED_IN_SUCCESS',
    payload: {
               isLoggedIn: true,
               shouldRedirect: true,
               errorMessage: null,
               user: {username: username, password: password}
             }
  };
}

function fail() {
  return {
    type: 'LOGGED_IN_FAIL',
    payload: {
              isLoggedIn: false,
              shouldRedirect: false,
              errorMessage: 'login failed',
              user: null
             }
  };
}


export function login(username, password){
  return username === 'ariful.haque@icarasia.com' ? success(username, password) : fail();
}

您可以在 AuthReducer.js 中将 action.type 捕获为 LOGGED_IN_SUCCESS 和 LOGGED_IN_FAIL