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のアクションをディスパッチしていないことです。あなたはreduxストアで何かをするためにdispatch(this.props.addPlot(props))に電話する必要があります。