ディスパッチャを使用したReduxフォームの非同期検証

Question

私のフォームで、私の 'userExists'アクションを追加して、ユーザ名が既に取得されているかどうかを調べようとしています。私は、redux-formのドキュメントでうまく動作しているasyncValidateを持っています。今私は自分の行動を追加したいが、これを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); 

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