web-dev-qa-db-ja.com

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

私は反応を始めたばかりで、少し迷っています。ログインページを作成し、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パッケージのドキュメントでは、ストアで状態を設定することについて言及していますが、最初にセットアップする必要があるものですか？

reactjsreduxreact-reduxjsx
17
jmona789

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

  1. リクエストを行うには、fetchをfetch-polyfillとともに使用して、すべてのブラウザ間で互換性を持たせることができます（ link ）
  2. Axiosライブラリ。 （ リンク ）
  3. 約束のあるスーパーエージェント（ link ）

フェッチを使用する場合、ポリフィルはIEおよびサファリでまだサポートされていないため、ポリフィルを使用する必要があります。 。

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

[〜＃〜] fetch [〜＃〜]

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

[〜＃〜] axios [〜＃〜]

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

これがAPI呼び出しの場合で、現在状態になっています。 reduxには、アプリを処理する1つの状態があります。 here を見つけることができるreduxの基本を実行することをお勧めします。したがって、API呼び出しが成功したら、データで状態を更新する必要があります。

データを取得するアクション

 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 receiveData(data) {
      return{
        type: 'RECEIVE_DATA',
        data
     }
   }

リデューサー

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