Post 以 redux 形式使用 axios 和 redux-thunk 请求

Question

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

这是我的请求模块

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 函数时，它进入函数，但从未运行 returned 函数。

我尝试修改函数的顺序。我最终得到了一个有效的 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 的工作 post 请求，然后将响应分派给 reducer 吗？

谢谢！

更新

经过反复测试，我认为问题出在 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 方法中。调用了登录方法，但从未调度 return 值。

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

Answer 1

您的函数不应该再次 'return (dispatch)'，因为该操作所做的是 return 一个函数。它应该只是

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

已使用完整功能进行编辑。

Answer 2

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

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

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

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

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

Answer 3

无法添加评论，但我很高兴你明白了。但是，我想警告您，在较新版本的 redux-form 上，您必须在 connect 函数之外装饰您的表单到 redux。我运行遇到了这个问题，它让我疯狂地试图解决它。

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

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

然后是标准连接函数

export default connect(null, actions)(LoginPage)

希望这能让您以后不再头疼

Post 以 redux 形式使用 axios 和 redux-thunk 请求

Post request with axios and redux-thunk in a redux-form

reactjs

redux

redux-thunk

redux-form

axios

更新