Javascript 使用承诺响应Redux登录：登录：1未捕获（承诺中）

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

我创建了一个简单的登录应用程序，其中AuthAction从loginusername、password函数返回一个承诺。如果承诺返回得到解决，则登录可以完美工作，但如果承诺返回被拒绝，则会出现此错误

这是我的操作：authoction.js

这是我的Reducer:AuthReducer.js

这是登录页面容器

问题:

为什么我会在拒绝中得到这个未实现的承诺错误？尽管决心在起作用？ 在拒绝承诺时，如何在LoginPage组件中显示错误消息？

---

提前谢谢。

重新设计一下怎么样？ 行动：

函数成功用户名、密码{ 返回{ 键入：“登录成功”， 有效载荷：{ 伊斯洛格丁：是的， 应该重定向：是的， errorMessage:null， 用户：{用户名：用户名，密码：密码} } }; } 功能失效{ 返回{ 类型：“登录失败”， 有效载荷：{ 伊斯洛格丁：错， shouldRedirect:false， errorMessage:'登录失败'， 用户：空 } }; } 导出函数loginusername、密码{ 返回用户名=='ariful。haque@icarasia.com“？成功用户名，密码：失败；

---

} 好吧，我想这应该有帮助。需要对动作对象进行一点重构

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,
    })
})

---

这将根据您的承诺发送正确的对象resolve and reject

Hi@kevin它不起作用：给我未捕获的类型错误：0，\u AuthActions.login…catch不是函数抱歉，我的错误。我看到您的操作只登录了一种类型，但reducer尝试捕获几种类型。我是否遗漏了一些代码？目前仅使用登录的动作类型。其他类型我尝试在resolve或reject时返回不同的类型。这种方法也不管用：这个方法管用。。但在登录时需要返回成功。谢谢。谢谢你的提醒。我更新了答案，希望将来也能帮助别人。

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
                }

            );
        }

    })
};

}

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

applyMiddleware(thunk, promise())

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,
    })
})