React 中的 Axios-Redux 对 Express 端点 - .then 和 .catch 都触发

Question

我正在使用 Redux 表单向 Express 端点发送 POST 调用。端点应该返回成功保存的对象，否则返回错误。

端点成功保存发布的数据并返回 JSON。但是 Redux 操作中的 Axios 会同时提取 .then 和 .catch 触发器——在以下操作中，它会记录以下内容：

successful response:  { …}
failure response:  undefined

我做错了什么？

我的 Axios 操作：

export function addPlot(props) {
    const user = JSON.parse(localStorage.getItem('user'));
    return function(dispatch) {
        axios
            .post(
                `${ROOT_URL}/plots`,
                {
                    props
                },
                { headers: { authorization: user.token } }
            )
            .then(response => {
                console.log('successful response: ', response.data);
                const plotModal = document.getElementById('plotModal');
                plotModal.modal('dispose');
                dispatch({ type: PLOT_ADDED, payload: response.data });
                dispatch({ type: ADDING_PLOT, payload: false });
                dispatch({
                    type: NEW_PLOT_GEOJSON,
                    payload: ''
                });
            })
            .catch(response => {
                console.log('failure response: ', response.data);
                dispatch(authError(PLOT_ADD_FAILURE, 'Failed to add plot'));
            });
    }

我的端点：

exports.newPlot = async (req, res, next) => {
    console.log(JSON.stringify(req.body.props));
    let company;
    if (req.user.companyCode !== 'Trellis') {
        company = req.user.companyCode;
    } else {
        company = req.body.props.company;
    }
    const {
        name,
        feature,
        growerPhone,
        plotCode,
        rootStock,
        region,
        variety,
        grower,
        planted
    } = req.body.props;
    const plot = new Plot({
        name,
        grower,
        variety,
        planted,
        region,
        rootStock,
        plotCode,
        growerPhone,
        feature,
        company
    });
    try {
        const newPlot = await plot.save();
        res.json(newPlot);
    } catch (e) {
        console.log("couldn't save new plot", JSON.stringify(e));
        return res.status(422).send({ error: { message: e, resend: true } });
    }
};

Answer 1

您可以使用redux-thunk 中间件来管理异步操作。

我看到的问题是你没有调度 axios 动作，你必须调用dispatch(this.props.addPlot(props))才能在 redux store 中做一些事情。