Tepki-redux'ta bir HTTP isteğini nasıl yapabilirim?

Question

Sadece tepkiyle çalışmaya başladım ve biraz kaydım. Bir giriş sayfası oluşturmaya ve bir http post isteği yapmaya çalışıyorum. Şu anda sadece HTTP istek çalışma her türlü almaya çalışıyorum, bu yüzden istek bin kullanıyorum ve bir npm paket için docs bu temel eylemi (https://www.npmjs.com/package/redux-react-fetch) bulundu: sonra Yani

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

bir eylem yazma, ne yapmalıyım? Uygulamamı bu işlemi çağırmak ve kullanmak için gerçekten nasıl alabilirim? Npm paketindeki dokümanlar, mağazamda bir eyalet belirlemeyle ilgili bir şeyden bahsetmiş, ilk önce kurmam gereken bir şey mi?

Answer 1

Aşağıdakilerden birini deneyebilirsiniz. Hem fetch hem de axios'u kullandım, harika çalışıyorlar. Yine de superagent'u denemek için.

1. talepler yapmak için, tüm tarayıcılarda (link)
2. Axios kütüphane arasındaki uyumluluk için getir-Polyfill ile fetch kullanabilir. vaatlerle (link)
3. superagent. (link)

bunu henüz IE ve Safari desteklenmez beri polyfill kullanmanız gerekir getirme kullanın. Ama polyfill ile oldukça iyi çalışıyor. Bunları nasıl kullanabileceğinizi görmek için bağlantılara göz atabilirsiniz.

Yapacağınız şey, eylem oluşturucunuzda, yukarıdakilerden herhangi birini kullanarak bir API'yi çağırabilirsiniz.

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 
    }); 

Yani şimdi devlete geliyor, API çağrısı içindi GETİR. Redux'da uygulamanızı yöneten bir durum var. here'u bulabileceğiniz redux temellerinden geçmenizi öneririm. Böylece, api çağrınız başarılı olduğunda, verilerinizi verilerle güncellemeniz gerekir.

Eylem Sana söz kitaplığı kullanılmaz ettik

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