使用redux-thunk进行异步验证

Question

对于我的项目，我正在使用Redux-Form 。

我想验证密码，如果密码正确，则自动将用户登录到系统。 用户登录后，我更新了一些内部的还原状态。 为此，我使用了带有动作方法的redux thunk。

我面临的问题是redux thunk操作无法返回异步redux-form验证所需的Promise。

这是我有的错误：

asyncValidate function passed to reduxForm must return a promise

有人知道问题出在哪里吗？

这是我正在使用的代码：

asyncValidate.js

import {logIn} from '../user/actions';

const asyncValidate = (values, dispatch) => {
    return logIn(values.booker.email, values.booker.password);


}

export default asyncValidate

用户登录动作

export const logIn = (email, password) => (dispatch) =>
new Promise(function (resolve, reject) {
    axios.post('/login_check', qs.stringify({
        _username: email,
        _password: password,
        _csrf_token: CSRF_TOKEN
    }), ajaxConfig)
        .then(response => {
            if (response.data.success !== true) {

                dispatch({
                    type: LOG_IN_ERROR,
                    payload: response.data.message
                });
                reject(response.data.message);

            }
            else {
                dispatch({
                    type: LOG_IN_SUCCESS,
                    payload: response.data.user
                });
                resolve();
            }

        })
        .catch((error) => {
            dispatch({
                type: LOG_IN_ERROR,
                payload: error
            });
            reject(error);
        })

});

编辑1：

尝试了@Ravindra Ranwala建议的代码，但我仍然遇到相同的错误：

@Emrys Myrooin建议将代码从动作移至asyncValidation函数，但当用户（在本例中为我）输入错误密码时，Redux-Form不会触发任何错误。

这是新的asyncValidate函数的代码：

import {LOG_IN_ERROR, LOG_IN_SUCCESS, CSRF_TOKEN} from '../booker/actions';
    import axios from 'axios';
    const qs = require('qs');
    const ajaxConfig = {
        headers: {"X-Requested-With": "XMLHttpRequest"}
    };

const asyncValidate = (values, dispatch) => {
    console.log(values);
    return new Promise(function (resolve, reject) {
        axios.post('/login_check', qs.stringify({
        _username: values.booker.email,
        _password: values.booker.password,
        _csrf_token: CSRF_TOKEN
    }), ajaxConfig)
        .then(response => {
            console.log(response);
            if (response.data.success !== true) {

                dispatch({
                    type: LOG_IN_ERROR,
                    payload: response.data.message
                });
                reject(response.data.message);

            }
            else {
                dispatch({
                    type: LOG_IN_SUCCESS,
                    payload: response.data.user
                });
                resolve();
            }

        })
        .catch((error) => {
            dispatch({
                type: LOG_IN_ERROR,
                payload: error
            });
            reject(error);
        })
    })


    }

    export default asyncValidate

编辑2.从注释更新代码

使用此代码，一旦密码字段触发模糊事件，我就会收到此错误：

Uncaught Error: asyncValidate function passed to reduxForm must return a promise

Ajax请求完成后，我从一开始就收到了验证错误消息，但密码字段未验证...

ajax请求完成后，这是错误：

asyncValidate.js?9b4c:19 Uncaught (in promise) Error: Bad credentials.

asyncValidate函数：

import {logInError, logInSuccess, CSRF_TOKEN} from '../booker/actions';

import axios from 'axios'
const qs = require('qs')
const ajaxConfig = {
    headers: { 'X-Requested-With': 'XMLHttpRequest' },
}

const asyncValidate = (values, dispatch) => {
    axios
        .post(
            '/login_check', qs.stringify({
                _username: values.booker.email,
                _password: values.booker.password,
                _csrf_token: CSRF_TOKEN,
            }), ajaxConfig)
        .then(response => {
            console.log(response);
            if (response.data.success)
                dispatch(logInSuccess(response.data.user))
            else
                throw new Error(response.data.message)
        })
        .catch(error => {
            dispatch(logInError(error.message))
            throw error
        })
}

export default asyncValidate

减速器动作：

export const logInSuccess = response => ({
    type: LOG_IN_SUCCESS,
    payload: response

});

export const logInError = (response) => ({
    type: LOG_IN_ERROR,
    payload: response


});

Answer 1

您的函数logIn是一个动作创建者，该动作创建者返回一个动作，此处为一个thunk。 所以不，返回logIn并不是一个承诺。

我认为您应该将异步代码移至asyncValidate函数，并使用参数中给定的dispatch来分派要修改redux状态的操作。

编辑

您的代码应如下所示：

import { logInError, logInSuccess, CSRF_TOKEN } from '../booker/actions'
import axios from 'axios'
const qs = require('qs')
const ajaxConfig = {
  headers: { 'X-Requested-With': 'XMLHttpRequest' },
}

const asyncValidate = (values, dispatch) => 
  axios
    .post(
      '/login_check', qs.stringify({
        _username: values.booker.email,
        _password: values.booker.password,
        _csrf_token: CSRF_TOKEN,
      }), ajaxConfig)
    .then(response => {
      if (response.data.success)
        dispatch(logInSuccess(response.data.user))
      else
        throw new Error(response.data.message)
    })
    .catch(error => {
      dispatch(logInError(error.message))
      throw { password: error.message })
    })

在文件../booker/actions ，

export const logInSuccess = user => ({
  type: LOG_IN_ERROR,
  payload: user
})

export const logInError = (message) => ({
  type: LOG_IN_ERROR,
  payload: message
})

一些解释：

就像其他答案指出的那样，您不必将ajax调用封装到Promise因为axios已经返回了promise。 要拒绝then函数中的承诺，您可以抛出一个错误。

另一点是从定义动作的特定action文件中构建动作。 否则，您将有大量重复的操作，并且维护起来很糟糕。

最后一点，您可能不必在条件中显式检查aBoolean === true 。 只需执行if(aBoolean)或if(!aBoolean) 。 如果确实要检查您的变量是否确实是布尔值（同样非常不寻常），则可以使用=== 。

Answer 2

您不必显式地返回承诺。 当您将操作分派给商店时，thunk变得很有用。 尝试像这样更改代码。

export function login(email, password) {
    return function(dispatch) {
        axios.post('/login_check', qs.stringify({
        _username: email,
        _password: password,
        _csrf_token: CSRF_TOKEN
    }), ajaxConfig)
        .then(response => {
            if (response.data.success !== true) {

                dispatch({
                    type: LOG_IN_ERROR,
                    payload: response.data.message
                });

            }
            else {
                dispatch({
                    type: LOG_IN_SUCCESS,
                    payload: response.data.user
                });
            }

        })
        .catch((error) => {
            dispatch({
                type: LOG_IN_ERROR,
                payload: error
            });
        })
    }
}