Redux 表单异步验证与调度程序答案

【问题标题】：Redux form async validation with dispatcherRedux 表单异步验证与调度程序
【发布时间】：2017-05-24 16:56:54
【问题描述】：

在我的表单中，我尝试添加我的“userExists”操作以确定用户名是否已被使用。我的 asyncValidate 使用 redux-form 的文档成功。现在我想添加我的操作，但我没有找到任何很好的例子来将它与 Promise 的需要联系起来。我可以使用调度程序添加我的操作，但我收到一个错误，redux 需要通过 Promise 调度。

有没有例子说明如何做到这一点？

FormComponent.jsx

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
const asyncValidate = (values , dispatch) => {

    /// ?... dispatch(userExists({ email : values.email }))

    return sleep(1000).then(() => {
        // simulate server latency
        if (['john', 'paul', 'george', 'ringo'].includes(values.username)) {
            throw {username: 'That username is taken'}
        }
    })
}

userAction.jsx

export function userExists(params) {

    return (dispatch) => {

        axios.get('http://apiserver.com/api/users.php', {
            params : { ...params }
        })
            .then((response) => {
                console.log(response.data);
                dispatch({ type : "FETCH_USER_FULFILLED", payload : response.data })
            })
            .catch((err) => {
                dispatch({ type : "FETCH_USER_REJECTED", payload : err })
            });
    }
}

userReducer.jsx

export default function reducer(state = {
    user : {
        id : null,
        firstName : null,
        lastName  : null,
        email     : null,
        meta : {
            zipCode      : null,
            streetNumber : null,
            city         : null,
        },
    },
    fetching   : false,
    fetched    : false,
    error      : null

}, action) {

    switch (action.type) {
        case 'FETCH_USER_PENDING' : {
            return {...state,
                fetching : true
            }
            break;
        }
        case "FETCH_USER_REJECTED" : {
            return {...state,
                fetching : false, error : action.payload
            }
            break;
        }
        case "FETCH_USER_FULFILLED" : {
            return {...state,
                fetched : true, user : action.payload
            }
            break;
        }
        case "ADD_USER" : {
            return {...state,
                user : action.payload }
            break;
        }
    }
    return state;
}

store.jsx

import { applyMiddleware, createStore } from 'redux';
import { createLogger } from 'redux-logger';

import thunk from 'redux-thunk';
import promise from 'redux-promise-middleware';
import reducers from './reducers/Reducers.jsx';

const middleware = applyMiddleware(promise(), thunk, createLogger());

export default createStore(reducers, middleware);

【问题讨论】：

标签： javascript reactjs promise redux redux-form

【解决方案1】：

这是一个带有调度的动作 asyncValidate 的示例。我希望这会有所帮助。

export const asyncValidate = (values, dispatch) => {

  return new Promise((resolve, reject) => {
    dispatch({
      type: types.GET_USERNAME_DATA,
      promise: client => client.post('/api', values),
    }).then((result) => {
      if (result.data.code !== 200) reject({username: 'That username is taken'});
      else resolve();
    });
  });
};

【讨论】：