終極版中間件 - 勾成

我使用終極版無極中間件和寫我的行動創造者這樣終極版中間件 - 勾成

export const getProject =() => ({ 
    type: "GET_PROJECT", 
    payload: axios.get(process.env.SERVICE_URL + '/project/') 
})

使_FULFILLED和_REJECTED會自動附加操作屬性。這工作正常。使用終極版無極中間件之前，我用的是行動本身裏面派遣接近我的行爲，這種方式：

export function fetchTypes(){ 
return function(dispatch) { 
    axios.get(process.env.SERVICE_URL + "/kinds/", { 
     headers: { 
     'Authorization': 'JWT ' + sessionStorage.jwt 
     } 
    }) 
    .then((response) => { 
     dispatch({ type: "FETCH_TYPES_FULFILLED", payload: response.data }) 
    }) 
    .catch((err) => { 
     dispatch({ type: "FETCH_TYPES_REJECTED", payload: err }) 
    }) 
    } 
}

更加詳細和重複。這種方法的問題是，我必須在創建的每個操作上追加標題。我現在要做的是編寫一箇中間件來更新負載並將JWT令牌附加到API請求中，這樣我就不必在每個動作創建者都這樣做，並檢查令牌過期。這是可行的嗎？我已閱讀關於中間件的博客和帖子，但無法找到掛鉤請求並在調用next（action）之前添加屬性的方法。或者我只是用錯誤的方式來解決問題？

來源

2017-08-10 Laura Silvani

例如，您可以創建一個名爲api.js的單獨文件。在那裏描述了你的API函數，比如fetchKinds等等。你的動作函數不應該包含API邏輯，它們是用於調度正確的動作。

// api.js 
class Api { 
    _checkTokenExpiration() { 
    // Throw error if expired 
    } 

    _getAuthHeaders() { 
    this._checkTokenExpiration() 
    return { 
     'Authorization': 'JWT ' + sessionStorage.jwt 
    } 
    } 

    fetchKinds() { 
    return axios.get(process.env.SERVICE_URL + "/kinds/", { 
     headers: this._getAuthHeaders() 
    }) 
    .catch(err => { 
     throw err 
    }) 
    } 
} 

export default new Api() 



// actions 
import api from './path/to/api.js' 

export function fetchTypes(){ 
    return function(dispatch) { 
    api.fetchKinds() 
     .then((response) => { 
     dispatch({ type: "FETCH_TYPES_FULFILLED", payload: response.data }) 
     }) 
     .catch((err) => { 
     dispatch({ type: "FETCH_TYPES_REJECTED", payload: err }) 
     }) 
    } 
}

來源

2017-08-11 06:57:17 GProst

終極版中間件 - 勾成

回答

相關問題