使用 redux-thunk 进行异步验证

Question

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

如果密码正确，我想验证密码并自动将用户登录到系统。用户登录后，我更新了一些内部 redux 状态。为此，我使用了带有操作方法的 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. 来自 cmets 的更新代码

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

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

您不必明确返回承诺。当您向商店发送操作时，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
            });
        })
    }
}

Answer 2

您的函数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 已经返回了一个承诺。要在 then 函数中拒绝承诺，您可以直接抛出错误。

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

最后一点，您可能永远不必在条件中显式检查aBoolean === true。只需 if(aBoolean) 或 if(!aBoolean)。 === 如果你真的想检查你的变量是否实际上是一个布尔值（这也是非常不寻常的），可以使用。