使用redux-thunk进行异步验证

Question

for my project I am using Redux-Form .

I want to validate password and automatically log user to system if password is correct. After user is logged I update some internal redux states. To do that I used redux thunk with actions method.

Problem that I am facing is that redux thunk action fails to return Promise that is needed for async redux-form validation.

This is error I have:

asyncValidate function passed to reduxForm must return a promise

Does someone knows where is the problem?

Here is code I am using:

asyncValidate.js

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

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


}

export default asyncValidate

User login action

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

});

EDIT 1:

Tried code that @Ravindra Ranwala suggested and I still got same error:

@Emrys Myrooin suggested to move code from actions to asyncValidation function but Redux-Form doesn't trigger any error when user (me in this case) enters wrong password.

Here is code for new asyncValidate function:

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

EDIT 2. Updated code from comments

With this code, as soon as password fields triggers blur event I got this error:

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

After ajax request is finished I got validation error message that I want to have from beginning but password field is not validated...

This is error after ajax request is finished:

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

asyncValidate function:

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

Reducer actions:

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

});

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


});

Answer 1

Your function logIn is an action creator that returns an action, here a thunk. So no, the return of logIn is not a promise.

I think you should move your async code to the asyncValidate function and use the dispatch given in parameter to dispatch the actions you want to modify the redux state.

EDIT

Your code should look like this :

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

And in your file ../booker/actions you should have

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

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

Some explanations:

As pointed by the other answer, you don't have to encapsulate you ajax call into a Promise because axios already return a promise. To reject a promise in a then function, you can juste throw an error.

An other point is to nether build an action out of the specific action file where you define your actions. Otherwise you will have tons a duplicated actions and it's terrible for maintenance.

A last point, you probably never have to explicitly check aBoolean === true in a condition. Just do if(aBoolean) ou if(!aBoolean) . The === can be use if you really want to also check that your variable is actually a boolean (again it's very unusual).

Answer 2

You don't have to return a promise explicitly. thunk becomes useful when you dispatch an action to the store. Try changing your code like this.

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