react-reduxでHTTPリクエストを作成するにはどうすればよいですか？

Question

私はちょうど反応を開始しており、少し失われています。私はログインページを作って、http投稿要求をしようとしています。今私は、HTTPリクエストの作業のいずれかのタイプを取得しようとしているので、私は、要求ビンを使用していると私はNPMパッケージのドキュメントで、この基本的なアクション（https://www.npmjs.com/package/redux-react-fetch）が見つかりました：の後に、そう

export function updateTicket(ticketId, type, value){ 
    return { 
    type: 'updateArticle', 
    url: `http://requestb.in/1l9aqbo1`, 
    body: { 
     article_id: ticketId, 
     title: 'New Title' 
    }, 
    then: 'updateTicketFinished' 
    } 
} 

を行動を書く、私は何をしますか？実際に私のアプリに電話をかけてその行動を利用させるにはどうすればいいですか？ npmパッケージのドキュメントには、自分の店の状態を設定するための何かが書かれています。それは最初に設定する必要があるのでしょうか？

Answer 1

次のいずれかを試すことができます。私はfetchとaxiosの両方を使用していますが、彼らは驚くほどうまく機能します。しかし、superagentを試してみてください。

1. 要求を行うために、あなたはすべてのブラウザ（link）
2. Axiosライブラリ間の互換性のために フェッチポリフィルでfetchを使用することができます。 （link）
3. 約束してたSuperAgent。（link）

あなたがフェッチ使用している場合、それはまだIEとSafariでサポートされていませんので、あなたがポリフィルを使用する必要があります。しかし、polyfillではかなりうまく機能します。どのようにそれらを使用するためのリンクをチェックアウトすることができます。

あなたのアクションクリエイターには、上記のいずれかを使用してAPIを呼び出すことができます。

は

function fetchData(){ 
    const url = '//you url' 
    fetch(url) 
    .then (response) => {//next actions} 
    .catch(error) => {//throw error} 
} 

をFETCH AXIOS

axios.get('//url') 
    .then(function (response) { 
    //dispatch action 
    }) 
    .catch(function (error) { 
    // throw error 
    }); 

だから、今の状態に来て、API呼び出しのためでした。 reduxにはあなたのアプリを扱う1つの状態があります。私はあなたがhere見つけることができるreduxの基本を通過することをお勧めします。だから、あなたのAPI呼び出しが成功すると、あなたの状態をデータで更新する必要があります。

状態

function receiveData(data) { 
     return{ 
     type: 'RECEIVE_DATA', 
     data 
    } 
    } 

を更新するために、データに

function fetchData(){ 
    return(dispatch,getState) =>{ //using redux-thunk here... do check it out 
     const url = '//you url' 
     fetch(url) 
     .then (response) => {dispatch(receiveData(response.data)} //data being your api response object/array 
     .catch(error) => {//throw error} 
    } 
    } 

アクションをフェッチするアクションリデューサー

function app(state = {},action) { 
     switch(action.types){ 
      case 'RECEIVE_DATA': 
       Object.assign({},...state,{ 
        action.data 
        } 
        }) 
      default: 
      return state 
     } 
    }