React Redux Promise登錄：login：1未捕獲（承諾）

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
                }

            );
        }

    })
};

}

這是我的減速機 ： 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;

這是LoginPage 容器

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. 為什么我在拒絕時遇到Uncaught (in promise)錯誤？ 雖然resolve有效？
2. 根據拒絕承諾，如何在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

Answer 2

好吧，我認為這應該有所幫助。 需要對動作對象進行一些重組。

const login = (username, password) => function (dispatch) {
new Promise((resolve, reject) => {
    if (username === 'ariful.haque@icarasia.com') {
        resolve(
            { 
              isLoggedIn: true,
              shouldRedirect: true,
              errorMessage: null,
              user: {username: username, password: password}
            }
        );
    } else {
        reject(
          {
            isLoggedIn: false,
            shouldRedirect: false,
            errorMessage: 'login failed',
                user: null
          }
        )
    }
})
.then(payload => {
    dispatch({
        type: 'LOGGED_IN',
        payload,
    })
})
.catch(payload => {
    dispatch({
        type: 'LOGGED_IN',
        payload,
    })
})

這將根據您的承諾解決和拒絕調度正確的對象