react.js：使用 redux-form、rest api 和 async/await 创建资源

Posted 2023-02-22

【中文标题】react.js：使用 redux-form、rest api 和 async/await 创建资源

【英文标题】：react.js: Create resource with redux-form, rest api and async/await

【发布时间】：2018-07-05 03:14:39

【问题描述】：

我正在尝试使用 redux 表单和 REST api 创建新资源。

我发送createPost 操作，我想在继续之前检查帖子是否成功。

const handleFormSubmit = (values, dispatch) => 
    dispatch(createPost(values));
    //I want to check here if post was succeeded.
    //if status = 200 this.props.history.push('/');



export function createPost(values) 
  return async function(dispatch) 
    let request;
    try 
      request = await axios.post(`$ROOT_URL/posts`, values)
     catch(err) 
      request =  err ;
    
    dispatch(
      type: CREATE_POST,
      payload: request
    )    
  

【参考方案1】：

返回一个承诺，像这样：

export function createPost(values) 
  return function(dispatch) 
    return new Promise( async function(resolve, reject)
      let request;
      try 
        request = await axios.post(`$ROOT_URL/posts`, values)
       catch(err) 
        reject(err)
      
      dispatch(
        type: CREATE_POST,
        payload: request
      ) 
      resolve(request)
    )
     


   const handleFormSubmit = () => 
        dispatch(createPost(values))
        .then( res => 
          // do yoour stuff on succes
         )
        .catch(err => 
          // stuff on err
        ) 
    

【参考方案2】：

看到您的代码，我认为您不需要使用承诺。 请尝试如下：

const getAction = (values) => (dispatch) => 
  return axios
          .post(`$ROOT_URL/posts`, values)
          .then(
            () => 
              dispatch(
                type: CREATE_POST,
                payload: request
              )
            ,
            () => 
              throw new SubmissionError(
                _error: 'Failed'
              );
            
           );
;

const handleSubmit = (values) => 
  return dispatch(getAction(values));
;