更新

Question

我无法计算如何使用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的工作发布请求，然后将响应发送到reducer？

谢谢！

更新

经过广泛的测试和来回，我认为问题是以redux形式。正如迈克尔指出的那样，调度应该有效。我使用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方法中。调用login方法，但永远不会调度返回值。

再次感谢您的时间和帮助

Answer 1

我发现了我的问题。感谢迈克尔的评论，这有助于我向另一个方向发展。

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

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

我还必须在onSubmit

中更改对登录功能的调用

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

Answer 2

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

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

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

然后是标准连接功能

export default connect(null, actions)(LoginPage)

希望这能为您节省未来的头痛

Answer 3

你的功能不应该返回（发送）＆＃39;再次，因为动作的作用是返回一个函数。它应该只是

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

以完整功能编辑。

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

更新

3 个答案: