我无法计算如何使用axios和redux-thunk发出请求，以便在查询后调度动作。以axios和redux形式发送请求以redux形式发送请求

这里是我的请求模块

export default { 
    get: function (action, url) { 
     return (dispatch) => { 
      axios.get(`${ROOT_URL}${url}`) 
       .then(({ data }) => { 
        dispatch({ 
         type: action, 
         payload: data 
        }); 
       }); 
     }; 
    }, 

    post: function (action, url, props) { 
     return (dispatch) => { 
      axios.post(`${ROOT_URL}${url}`, props) 
       .then(({ data }) => { 
        return (dispatch) => { 
         dispatch({ 
          type: action, 
          payload: data 
         }); 
        }; 
       }); 
     }; 

    } 
}

的GET作品。当我调用post函数时，它会进入函数，但不会运行返回的函数。

我试着修改函数的顺序。我结束了一个工作岗位请求，但行动从未派发。

post: function (action, url, props) { 
     //POST works but action is not dispatched to reducer 
     axios.post(`${ROOT_URL}${url}`, props) 
      .then(({ data }) => { 
       return (dispatch) => { 
        dispatch({ 
         type: action, 
         payload: data 
        }); 
       }; 
      }); 
    }

任何想法，我怎么能实现工作后请求得到发送给我的API，然后响应被分派到减速？

谢谢！

UPDATE

经过广泛的测试和来回，我觉得这个问题是在终极版形式。正如迈克尔指出的那样，派遣应该起作用。我使用get方法在我的组件中测试了我的调用，但它不起作用。这是我的组件

const form = reduxForm({ 
    form: 'LoginPage', 
    validate 
}); 

const renderField = ({ input, label, type, meta: { touched, error } }) => (
    <div className="form-group"> 
     <label>{label}</label> 
     <div> 
      <input {...input} placeholder={label} type={type} className="form-control" /> 
      {touched && ((error && <span>{error}</span>))} 
     </div> 
    </div> 
) 

class LoginPage extends Component { 
    displayName: 'LoginPage'; 

    onSubmit(props) { 
     login(props.email, props.password); 
    } 

    render() { 

     const {handleSubmit} = this.props; 

     return (
      <div className='row'> 
       <div className='center-block'> 
        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> 
         <Field name="email" type="email" label='Courriel :' component={renderField} /> 

         <Field name="password" type="password" label='Mot de passe :' component={renderField} /> 

         <div className="form-group text-center"> 
          <button type="submit" className='btn btn-primary'>Se connecter</button> 
         </div> 
        </form > 
       </div> 
      </div> 
     ); 
    }; 
}; 

const validate = values => { 
    const errors = {} 
    if (!values.email) { 
     errors.email = 'Required' 
    } else if (!/^[A-Z0-9._%+-][email protected][A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) { 
     errors.email = 'Invalid email address' 
    } 
    if (!values.password) { 
     errors.password = 'Required' 
    } 4 
    return errors 
} 

export default reduxForm({ 
    form: 'LoginPage', 
    validate 
})(LoginPage);

该发布请求是onSubmit方法。登录方法被调用，但返回值从未分派。

再次感谢您的时间和帮助

来源

2017-04-04 Bruno

我发现我的问题。感谢迈克尔的评论，这帮助我看到了另一个方向。

问题是我的表单没有连接到redux。我结束了将连接功能添加到我的导出语句。

export default connect(null, { login }) 
    (reduxForm({ 
     form: 'LoginPage', 
     validate 
    })(LoginPage));

而且我也不得不呼叫切换到登录功能的onsubmit

onSubmit(props) { 
     this.props.login(props.email, props.password); 
    }

来源

2017-04-05 12:39:30 Bruno

你的函数不应该“回归（派遣）”了，因为什么样的动作确实是返回一个函数。它应该是

function myFunc(action, url) { 
return function (dispatch) { 
    axios.post(`${ROOT_URL}${url}`, props) 
    .then(response => { 
     dispatch({ 
     type: action, 
     payload: response.data 
     }) 
    }) 
    } 
}

编辑与全功能。

来源

2017-04-04 19:53:17

感谢头痛，但是这是我在第一个地方，它不工作。我在一个网站上看到了发送旁边的回复，所以我试了一下。如果我在axios.post之前添加console.log，那么在两种情况下都不会调用它。 – Bruno

不能添加评论，但我很高兴你理解了它。不过，我想提醒你，在较新版本的redux-form中，你必须将连接函数外的表单修饰为redux。我遇到了这个问题，它迫使我试图弄清楚它。

这将是更新后连接redux-form的两个步骤。例如，它看起来像这样。

LoginPage = reduxForm({form: 'LoginPage', validate})(LoginPage)

，然后再把你的标准连接功能

export default connect(null, actions)(LoginPage)

希望这样可以节省你在未来

来源

2017-04-05 23:51:11

非常好，谢谢你的信息！ – Bruno

以axios和redux形式发送请求以redux形式发送请求

UPDATE

回答

相关问题