2017-05-10 10 views
0

私は成功した後にのみ私のデータを更新する非同期の投稿要求をしようとしています。redux、redux-thunk、およびaxiosと反応して、ポストリクエストのコールバックを設定する方法は?

私がしたいのは、アクションコールで約束型のものを使用することです。ここ

this.props.postAction('/event/user/44/post',data) 
.then((response) =>{ 
    console.log("Inside callback"); 
    console.log(response); 
}); 
export default connect({postAction})(EventFeed); 

は、私はポスト要求

export const POST_ACTION = 'POST_ACTION'; 

export function postAction(url,data) { 
    return function(dispatch) { 
     axios({ 
      method:'post', 
      url:API_URL + url, 
      headers: {'event': 55}, 
      data: data, 
     }) 
    .then(response => { 
     dispatch({ 
     type: POST_ACTION, 
     payload: response.data 
     }); 
    }) 
    .catch((error) => { 
     console.log(error); 
    }) 
    } 
} 

を作ってるんだ。しかし、私は、コールバック内で取得したことがないんだ、私のアクション・ファイルです。

ここで、応答からデータを取得するためのコールバックの作成方法は?

答えて

2

まず、あなたはすべきではありません。 Unidirectional dataflowの背後にあるアイデア全体に違反しています。 Reduxを使用する場合、非同期のものはアクション作成者だけで処理され、潜在的なデータペイロードを持つアクションがディスパッチされ、ストアが更新され、アプリケーションが再レンダリングされます。あなたが手を差し伸べて、約束を守ってあなたの流れに違反している場合。

この警告では、サンクから約束を返さないと言いました。連鎖しているときにもあなたの回答を返すべきです。 MDN

export function postAction(url,data) { 
    return function(dispatch) { 
     //You need to return your promise. 
     return axios({ 
      method:'post', 
      url:API_URL + url, 
      headers: {'event': 55}, 
      data: data, 
     }) 
    .then(response => { 
     dispatch({ 
     type: POST_ACTION, 
     payload: response.data 
     }); 
     return response; 
    }) 
    .catch((error) => { 
     console.log(error); 
    }) 
    } 
} 

おそらくhttps://codereview.stackexchange.com/が質問のtheese種類のより良い場所です。

関連する問題