Redux表单异步验证调度器

在我的表单中，我试图添加我的'userExists'操作来确定用户名是否已被占用。我有asyncValidate成功与redux-form的文档。现在我想添加我的动作，但是我没有找到任何好的示例将此与Promise的需求联系起来。我可以在调度程序中添加我的操作，但是我得到了一个错误，需要通过Promise进行调度。Redux表单异步验证调度器

是否有任何如何做到这一点的例子？

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

来源

2017-05-24 directory

这里是与调度动作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(); 
    }); 
    }); 
};

来源

2017-07-30 07:16:12 user2133389

Redux表单异步验证调度器

回答

相关问题