使用 axios 和 redux-thunk 以 redux-form 发布请求

Posted 2023-02-22

【中文标题】使用 axios 和 redux-thunk 以 redux-form 发布请求

【英文标题】：Post request with axios and redux-thunk in a redux-form

【发布时间】：2017-08-30 04:09:00

【问题描述】：

我不知道如何使用 axios 和 redux-thunk 发出发布请求，以便在查询之后调度操作。

这是我的请求模块

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 的工作发布请求，然后将响应分派到减速器吗？

谢谢！

更新

经过广泛的测试和反复测试，我认为问题出在 redux-form 上。正如迈克尔所指出的，调度应该有效。我用 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._%+-]+@[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);

post 请求在 onSubmit 方法中。登录方法被调用，但返回值从未被分派。

再次感谢您的宝贵时间和帮助

【参考方案1】：

无法添加评论，但我很高兴你知道了。但是我想警告你，在新版本的 redux-form 上，你必须在连接函数之外装饰你的表单到 redux。我遇到了这个问题，它让我想弄清楚它让我发疯。

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

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

然后是你的标准连接函数

export default connect(null, actions)(LoginPage)

希望这可以为您省去以后的麻烦

【参考方案2】：

我发现了我的问题。感谢 Michael 的评论，帮助我找到了另一个方向。

问题是我的表单没有连接到 redux。我最终将连接函数添加到我的导出语句中。

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

而且我还必须在 onSubmit 中更改对登录函数的调用

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

【参考方案3】：

您的函数不应再次“返回（调度）”，因为该操作所做的是返回一个函数。它应该只是

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

完整功能编辑。

【讨论】：

谢谢，但这是我最初拥有的，它也不起作用。我在一个网站上看到了发货旁边的退货，所以我试了一下。如果我在 axios.post 之前添加一个 console.log，则在这两种情况下都不会调用它。