终极版中间件 - 勾成

我使用终极版无极中间件和写我的行动创造者这样终极版中间件 - 勾成

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

终极版中间件 - 勾成

回答

相关问题