Question

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

我创建了一个简单的登录应用，其中AuthAction从Promise函数返回login(username, password)。如果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;

这是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);

我在Thunk

中使用store.js和Redux-Promise-Middleware

applyMiddleware(thunk, promise())

问题

为什么我拒绝这个Uncaught (in promise)错误？虽然resolve正在运作？
关于拒绝承诺，如何在LoginPage组件中显示错误消息？

先谢谢。

Answer 1

如何重新设计一下？动作：

＆＃13;

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();
}

＆＃13;

您可以在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,
    })
})

这将根据您的承诺解决方案调度正确的对象并拒绝

React Redux登录承诺：登录：1未捕获（承诺）

2 个答案: