如何在react-redux中創建HTTP請求？

我剛剛開始反應，我有點失落。我正在嘗試創建一個登錄頁面併發出一個http發佈請求。現在我只是想獲得任何類型的HTTP請求的工作，所以我使用的要求斌，我發現在文檔爲NPM包這個基本動作（https://www.npmjs.com/package/redux-react-fetch）：如何在react-redux中創建HTTP請求？

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

於是，經過寫一個動作，我該怎麼辦？我如何讓我的應用程序調用並使用該操作？ npm軟件包的文檔提到了在我的商店中設置狀態的一些事情，是我需要首先設置的東西嗎？

來源

2016-09-30 jmona789

我沒有用你所提到的庫，但我建議你在Redux上觀看egghead上的免費視頻。您將學習從創作者本人開始接觸包括如何進行http調用所需的一切。你真的不需要另外的抽象來做到這一點 https://egghead.io/courses/getting-started-with-redux https://egghead.io/courses/building-react-applications-with- idiomatic-redux –

[這裏]（http://redux.js.org/docs/advanced/AsyncActions.html）是你正在嘗試做什麼的文檔。基本上你需要做兩件事。首先，啓動一個ajax請求（使用任何你想要的，例如'fetch'或者jQuery）。這很可能發生在行動本身內。您需要做的下一件事是在ajax調用完成時使用來自ajax調用的信息更新商店。爲了做到這一點，你需要訪問商店的'dispatch'功能。 'AsyncActionCreators'部分應該告訴你如何做到這一點。 – mrmcgreg

我也會遠離那個圖書館，直到你明白如何用'react-redux'來做事情。 – mrmcgreg

您可以嘗試以下任何一種。我已經使用fetch和axios他們工作得非常好。但要嘗試superagent。

爲了使請求您可以使用fetch與取回填充工具爲不同的瀏覽器（link）
愛可信庫的兼容性。（link）
的SuperAgent與承諾。（link）

如果你使用獲取你需要使用填充工具，因爲它不是在IE和Safari尚不支持。但是使用polyfill它工作得很好。您可以查看鏈接以瞭解如何使用它們。

所以你要做的是在你的動作創建者你可以使用上面的任何一個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調用，現在來的狀態。在REDX有一個國家處理你的應用程序。我建議你應該通過REDX基礎知識，你可以找到here。所以一旦你的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 
     } 
    }

來源

2016-09-30 16:30:01

輝煌的總結。謝謝Harkirat –

謝謝。我現在正在嘗試使用axios.post與Axios做POST請求，但它不斷髮送get請求。我是否需要爲該職位創建一個操作？請參閱：http://stackoverflow.com/questions/39797940/react-axios-is-sending-a-get-request-instead-of-a-post – jmona789

猜你的問題解決了嗎？ –

如何在react-redux中創建HTTP請求？

回答

相關問題